我正在使用 [vis.js library][1] 來顯示網路。當您單擊一個節點時，它應該在右側的 div 框中顯示有關該節點的資訊文本。不知何故，從 javascript 收集并使用 *.innerhtml* 發送到 divbox 的文本沒有被包裹在 div-box 內，我無法對其進行樣式設定。
它現在如何顯示的
影像 我希望它成為的影像
問題 1如何讓文本留在 div 中？
問題 2當它被包裹在 div 中時，我可以用標題設定它的樣式并像在普通的 html/css 中一樣添加影像，還是應該使用其他解決方案？
我不是一個有經驗的編碼員，所以也許我沒有使用正確的方法。
到目前為止我嘗試過的
看起來html/css的常見斷字和溢位換行在這里不起作用，因為這是 javascript 的輸出。可以通過 DOM 樣式屬性（如溢位屬性）修改 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>uj5u.com熱心網友回復：
將white-space: pre-wrap用于您的預標記。
<!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>uj5u.com熱心網友回復：
第二個問題的答案在下面的代碼中，展示了如何在 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/359551.html