如何在 div-box 中显示来自 javascript innerhtml 的 text-output 而文本不会溢出并具有 html/css 样式

Question

我正在使用 [vis.js 库][1] 来显示网络。当您单击一个节点时，它应该在右侧的 div-box 中显示关于该节点的 info-text。不知何故，从 javascript 收集并使用 *.innerhtml* 发送到 div 框的文本没有被包裹在 div-box 中，我无法设置它的样式。

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

问题1如何让文字留在div？
问题 2 当它包裹在 div 中时，我可以用 headers 设置样式并像正常 html/css 一样添加图像，还是我应该使用另一个解决方案？

我不是经验丰富的编码员，所以可能我使用的方法不正确。

到目前为止我尝试了什么

html/css 的通用 word-break and overflow-wrap 在这里似乎不起作用，因为这是 javascript 的输出。可以通过 DOM 样式属性修改 innerhtml，例如 overflow property.

我试图包装文本的是添加：
document.getElementById("nodeContent").style.overflow = "auto";
这可以显示滚动条，但我想在 div 框中显示完整的文本。

我尝试但没有奏效的其他事情是添加这些：

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>

Answer 1

使用 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>

Answer 2

第二个问题的答案在下面的代码中，显示了如何在 javascript 中标记文本。

（注意：我将前置标签的 id 移到了 div，因为 class 和同名的 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>

如何在 div-box 中显示来自 javascript innerhtml 的 text-output 而文本不会溢出并具有 html/css 样式

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

javascript

html

dom

innerhtml

vis.js-network