<!doctype html> <html> <head> <title>Maximum Width Edge Case Test</title> <script src="../../dist/vis-network.min.js" type="text/javascript"></script> <link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { width: 600px; height: 400px; border: 1px solid lightgray; } </style> <script src="../../googleAnalytics.js"></script> </head> <body> <p>A word in a label that's wider than the maximum width will be forced onto a line. We can't do better without breaking the word into pieces, and even then the pieces could still be too wide.</p> <p>Avoid the problem. Don't set ridiculously small maximum widths.</p> <div id="mynetwork"></div> <script type="text/javascript"> var nodes = new vis.DataSet([ { id: 1, label: 'Node 1', widthConstraint : { maximum : 30 } } ]); var edges = []; var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { edges: { font: { size: 12 }, widthConstraint: { maximum: 90 } }, nodes: { shape: 'box', margin: 10, font: { multi: true }, widthConstraint: { maximum: 200 } }, physics: { enabled: false } }; var network = new vis.Network(container, data, options); </script> </body> </html>