如何在 div 框中显示来自 javascript innerhtml 的文本输出，而不会导致文本溢出并且具有 html/css 样式

Posted

技术标签:

【中文标题】如何在 div 框中显示来自 javascript innerhtml 的文本输出，而不会导致文本溢出并且具有 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 【发布时间】：2021-12-25 17:51:51 【问题描述】： 我正在使用 [vis.js 库][1] 来显示网络。当您单击一个节点时，它应该在右侧的 div 框中显示有关该节点的信息文本。 不知何故，从 javascript 收集并使用 *.innerhtml* 发送到 divbox 的文本没有被包裹在 div 框内，我无法设置它的样式。

Image of how it shows now@987654322 @

问题 1 如何让文本留在 div 中？ 问题 2 当它包含在 div 中时，我可以使用标题设置它的样式并像在普通 html/css 中一样添加图像，还是应该使用其他解决方案？

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

到目前为止我所做的尝试

看起来 html/css 的常见 word-break 和 overflow-wrap 在这里不起作用，因为这是从 javascript 输出的。 可以通过overflow property 等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>

【问题讨论】：

.div.nodeContent word-break: break-all; 【参考方案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>

【讨论】：

谢谢 Nishanth！我忽略了标签前的样式。这解决了我的第一个问题。你也知道我的第二个问题的答案吗？如何设置 javascript 文本输出的样式，即使用 h1、段落和添加链接图像。如果我将此 html 样式放入 javascript（在节点 1/info 下）而不是纯文本中，则会出现错误。 更新：我还想出了第二个问题的解决方案。我会在下面发布。 如果您对解决方案投赞成票，那就太好了。 我试过了，但遗憾的是还没有足够的声望点来投票，但我接受了这个解决方案作为答案。【参考方案2】：

第二个问题的答案在下面的代码中，展示了如何在 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>

【讨论】：

以上是关于如何在 div 框中显示来自 javascript innerhtml 的文本输出，而不会导致文本溢出并且具有 html/css 样式的主要内容，如果未能解决你的问题，请参考以下文章

在 div 中显示来自 JSON 的内容

如何在 Javascript 的警报/确认框中显示图像？

如何在消息框中显示来自 C# 的带有 WCHAR* 的 C 函数

更新 div 中的数据

如何将css添加到与搜索框中的单词匹配的div中的单词？ [复制]

如何在 React 中显示来自 JSON URL 数组的图像