CSS样式在span中正确显示单词

Question

我使用下面的模板来生成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页面的屏幕截图。

Answer 1

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

span {white-space: normal;}