[英]How can I show a text-output from javascript innerhtml in a div-box without the text overflowing and with html/css styling
问题 1如何让文本留在 div 中？
问题 2当它被包裹在 div 中时，我可以使用标题设置它的样式并像在普通的 html/css 中一样添加图像，还是应该使用其他解决方案？
我不是一个有经验的编码员，所以也许我没有使用正确的方法。
到目前为止我尝试过的
看起来 html/css 的常见断字和 溢出换行在这里不起作用，因为这是从 javascript 输出。 可以通过 DOM 样式属性（如overflow 属性）修改 innerhtml。
我试图包装文本的是添加：
document.getElementById("nodeContent").style.overflow = "auto";
这可以显示滚动条，但我想在 divbox 中显示完整的文本。
我尝试过但没有用的其他事情是添加这些：
document.getElementById("nodeContent").className = "div.nodeContent";document.getElementById("nodeContent").style.wordBreak = "break-all";这是代码
<!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>
使用white-space: pre-wrap为你的 pre 标签。
<!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>
第二个问题的答案在下面的代码中，展示了如何在 javascript 中标记文本。
（注意：我将 pre-tag 的 id 移到了 div 中，因为类和 id 同名会造成混淆）
<!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>
如何显示带有动画的溢出文本？（Javascript-HTML-CSS）
[英]How to show overflowing text with animation?(Javascript - HTML - CSS)
我可以将div的innerHTML存储到javascript和php中的隐藏文本框中吗
[英]can I store an innerHTML of a div into a hidden text box in javascript and php
CSS，JavaScript，HTML，如何将div中的文本与图像旁边的中间对齐？ 并为文本设置动画
[英]CSS, JavaScript, HTML, how can i align a text inside a div to middle beside an image? and animate the text
当从在线 url 加载文本到 div.innerHTML 时，对 id 或 class 进行 Javascript 样式设置将不起作用
[英]Javascript-styling an id or class wont work when loaded text from online url into div.innerHTML
如何通过使用javascript和css显示固定于div宽度的字符串数组中剩余的剩余文本数量？
[英]How can show number + more of remain text from string array fixed to div width by using javascript and css?
如何清除Enter或换行符（html / javascript）的文本框？
[英]How can I clear a text box of enter or newline (html / javascript)?
如果字符串来自javascript编码，我如何解码html文本框的字符串
[英]how can i decode a String for html text box if the string is coming from javascript with encoding
如何设置事件监听器以使用JavaScript从HTML源代码中侦听文本框？
[英]How can I set an event listener to listen to a text box from the HTML Source code using JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.