[英]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.