vis.js点击节点输出内容到div时文本溢出且无法样式化如何解决

你用于承载节点信息的容器是<pre>标签，该标签默认自带white-space: pre属性，不会自动折行，这是你设置的换行相关CSS不生效的根本原因。 #

问题1 解决方案 #

有两种可行方案，选其中一种即可：

方案1：替换pre标签为普通div（更推荐） #

把HTML中

<pre id="nodeContent"></pre>

修改为

<div id="nodeContent"></div>

你父级.nodeContent上已经设置了overflow-wrap: break-word，修改后文本会自动适配容器宽度换行，不会溢出也不需要滚动条。

方案2：保留pre标签，补充CSS样式 #

给pre标签添加自定义样式覆盖默认属性：

#nodeContent {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

该方案可以保留文本原本的换行、空格格式，同时实现自动折行。

你之前尝试的document.getElementById("nodeContent").className = "div.nodeContent";写法有误，className属性只需要填写类名，不需要加标签选择器前缀div.，且你操作的是pre元素，不是父级div，所以该操作不会生效，可以直接删掉这行代码。

问题2 解决方案 #

完全可以和普通HTML/CSS一样设置标题样式、插入图片：
你只需要把节点的info字段内容写成合法的HTML字符串即可，比如：

{
  id: 1,
  label: "Node 1",
  info: "<h3>节点1详情</h3><p>这是超长的节点描述文本，会自动换行展示</p><img src='你的图片地址' width='300' alt='节点配图'>"
}

用innerHTML插入后会正常渲染所有HTML元素，你可以直接在样式表中给.nodeContent内部的h3、p、img等标签写自定义样式，和普通页面元素没有区别。 #

修复后完整可运行代码 #

<!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;
}
div.nodeContent {
  position: relative;
  border: 1px solid lightgray;
  width: 480px;
  height: 780px;
  margin-left: 810px;
  padding: 10px;
  overflow-wrap: break-word;
}
/* 可以直接在这里写内部元素样式 */
.nodeContent h3 {
  color: #2c3e50;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.nodeContent img {
  max-width: 100%;
  border-radius: 4px;
}
</style>
</head>
<body>
<div> click on node 1</div>
<div id="mynetwork"></div>
<div class="nodeContent">
  <!-- 把pre换成了div -->
  <div id="nodeContent"></div> 
</div>
<script type="text/javascript">
var nodes = new vis.DataSet([
{
  id: 1,
  label: "Node 1",
  // 支持HTML内容
  info: "<h3>节点1</h3><p>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</p>"
},
{id: 2,label: "Node 2"},
{id: 3,label: "Node 3"},
{id: 4,label: "Node 4"},
{id: 5,label: "Node 5"},
]);
var edges = new vis.DataSet([
{from: 1,to: 3},
{from: 1,to: 2},
{from: 2,to: 4},
{from: 2,to: 5},
]);
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];
    document.getElementById("nodeContent").innerHTML = nodes.get(nodeId).info ?? '该节点暂无描述';
  }
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Codefun