stackoom
  简体   繁体   中英

How can I show a text-output from javascript innerhtml in a div-box without the text overflowing and with html/css styling

 原文  2021-11-13 22:47:48  3   2    javascript/ html/ dom/ innerhtml/ vis.js-network

Question


I am using [vis.js library][1] to display a network. When you click on a node it should display an info-text about the node in the div-box on the right. Somehow the text which is collected from the javascript and send to the divbox using *.innerhtml* is not being wrapped inside the div-box and I can't style it.

Image of how it shows now
Image of how i want it to be

Question 1 How can I get the text to stay in the div?
Question 2 And when it's wrapped in the div can I style it with headers and add images like in normal html/css, or should I use another solution?

I am not an experienced coder so maybe I am not using the right method.

What I've tried so far

It looks like the common word-break and overflow-wrap for html/css dont work here because this is output from javascript. The innerhtml can be modified via the DOM style properties like the overflow property .

What I tried to wrap the text was adding:
document.getElementById("nodeContent").style.overflow = "auto";
This works showing scrollbars, but i want to show the complete text in the divbox.

Other things I tried and didn't work was adding those:

  • document.getElementById("nodeContent").className = "div.nodeContent";
  • document.getElementById("nodeContent").style.wordBreak = "break-all";

This is the code

 <!doctype html> <html> <head> <script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script> </style> <style type="text/css"> #mynetwork { width: 800px; height: 800px; border: 1px solid lightgray; float: left; } div.nodeContent { position: relative; border: 1px solid lightgray; width: 480px; height: 780px; margin-left: 810px; padding: 10px; overflow-wrap: break-word; } </style> </head> <body> <div> click on node 1</div> <div id="mynetwork"></div> <div class="nodeContent"> <pre id="nodeContent"></pre> </div> <script type="text/javascript"> // create an array with nodes var nodes = new vis.DataSet([{ id: 1, label: "Node 1", info: "Large text is out of the div when it's too long Large text is out of the div when it's too long Large text is out of the div when it's too long" }, { id: 2, label: "Node 2" }, { id: 3, label: "Node 3" }, { id: 4, label: "Node 4" }, { id: 5, label: "Node 5" }, ]); // create an array with edges var edges = new vis.DataSet([{ from: 1, to: 3 }, { from: 1, to: 2 }, { from: 2, to: 4 }, { from: 2, to: 5 }, ]); // create a network var container = document.getElementById("mynetwork"); var data = { nodes: nodes, edges: edges, }; var options = {}; var network = new vis.Network(container, data, options); network.on("click", function(params) { if (params.nodes.length > 0) { var nodeId = params.nodes[0]; // get the data from selected node document.getElementById("nodeContent").innerHTML = nodes.get(nodeId).info; // show the data in the div } }); </script> </body> </html>

2 answers

solution1
 0  2021-11-14 06:16:45

Use the white-space: pre-wrap for your pre tag. 

 <!doctype html> <html> <head> <script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script> </style> <style type="text/css"> #mynetwork { width: 800px; height: 800px; border: 1px solid lightgray; float: left; } div.nodeContent { position: relative; border: 1px solid lightgray; width: 480px; height: 780px; margin-left: 810px; padding: 10px; overflow-wrap: break-word; } div>pre{ white-space: pre-wrap } </style> </head> <body> <div> click on node 1</div> <div id="mynetwork"></div> <div class="nodeContent"> <pre id="nodeContent"></pre> </div> <script type="text/javascript"> // create an array with nodes var nodes = new vis.DataSet([{ id: 1, label: "Node 1", info: "Large text is out of the div when it's too long Large text is out of the div when it's too long Large text is out of the div when it's too long" }, { id: 2, label: "Node 2" }, { id: 3, label: "Node 3" }, { id: 4, label: "Node 4" }, { id: 5, label: "Node 5" }, ]); // create an array with edges var edges = new vis.DataSet([{ from: 1, to: 3 }, { from: 1, to: 2 }, { from: 2, to: 4 }, { from: 2, to: 5 }, ]); // create a network var container = document.getElementById("mynetwork"); var data = { nodes: nodes, edges: edges, }; var options = {}; var network = new vis.Network(container, data, options); network.on("click", function(params) { if (params.nodes.length > 0) { var nodeId = params.nodes[0]; // get the data from selected node document.getElementById("nodeContent").innerHTML = nodes.get(nodeId).info; // show the data in the div } }); </script> </body> </html>

solution2
 0  2021-11-14 11:38:23

The answer to the second question is in the code below, showing how can you markup text in javascript.

(note: I moved the id of the pre-tag to the div because it was confusing to have a class and an id with the same name) 

 <!doctype html> <html> <head> <script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script> <style type="text/css"> #mynetwork { width: 800px; height: 800px; border: 1px solid lightgray; float: left; } #nodeContent { position: relative; border: 1px solid lightgray; width: 480px; height: 780px; margin-left: 810px; padding: 10px; overflow-wrap: break-word; white-space: pre-wrap; } </style> </head> <body> <div> Click on node 1</div> <div id="mynetwork"></div> <div id="nodeContent"> <pre>click on node 1 to see content</pre> </div> <script type="text/javascript"> // create an array with nodes var nodes = new vis.DataSet([{ id: 1, label: "Node 1", info1: "<h3>Title</h3>", info2: '<p>paragraph text example.paragraph text example. paragraph text example. paragraph text example.paragraph text example.<br><b>Example of a link:</b> <a href=\\"http://bing.com\\">Bing</a>. </p>', info3: "<b>Example of an image:</b> <br><img src=\\"https://www.w3schools.com/images/w3schools_green.jpg\\" alt=\\"W3Schools.com\\">", }, { id: 2, label: "Node 2" }, { id: 3, label: "Node 3" }, { id: 4, label: "Node 4" }, { id: 5, label: "Node 5" }, ]); // create an array with edges var edges = new vis.DataSet([{ from: 1, to: 3 }, { from: 1, to: 2 }, { from: 2, to: 4 }, { from: 2, to: 5 }, ]); // create a network var container = document.getElementById("mynetwork"); var data = { nodes: nodes, edges: edges, }; var options = {}; var network = new vis.Network(container, data, options); network.on("click", function(params) { if (params.nodes.length > 0) { var nodeId = params.nodes[0]; // get the data from selected node document.getElementById("nodeContent").innerHTML = nodes.get(nodeId).info1 + nodes.get(nodeId).info2 + nodes.get(nodeId).info3; // shows the data in the div } }); </script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to show overflowing text with animation?(Javascript - HTML - CSS) can I store an innerHTML of a div into a hidden text box in javascript and php CSS, JavaScript, HTML, how can i align a text inside a div to middle beside an image? and animate the text Javascript-styling an id or class wont work when loaded text from online url into div.innerHTML How can show number + more of remain text from string array fixed to div width by using javascript and css? how to prevent div text from overflowing container how to show text box in div How can I clear a text box of enter or newline (html / javascript)? how can i decode a String for html text box if the string is coming from javascript with encoding How can I set an event listener to listen to a text box from the HTML Source code using JavaScript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM