css - CSS样式可在跨度中正确显示单词

我已经使用下面的模板生成HTML，现在的问题是当我调整窗口大小时，跨度中的文本无法正确显示。在给定的屏幕截图中，“中止”的单词分为两行，这与我预期的不符。如何解决此问题？

   template: _.template([
      '<div class="notes">',
      '<label class="control-label"><%=label%>:</label>',
      '<span><%=text%></span></div>'
    ].join("\n"))

CSS：

.notes {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  display: block;
  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
  font-size: 12px;
  line-height: 1.42857;
  margin: 0 0 10px;
  overflow: auto;
  padding: 5px 10px;
  word-break: break-all;
  word-wrap: break-word;
}

div.notes label.control-label {
  min-width: 0px;
}

以下是我的HTML页面的屏幕截图。

最佳答案

看来您已将white-space设置为pre-wrap。您需要检查是否将整个代码注入到<pre>中，或者需要通过以下方式重置white-space属性：

span {white-space: normal;}

关于css - CSS样式可在跨度中正确显示单词，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41263194/