css 只有在没有空格时才断词

Question

我有这个代码：

.mydiv {
  display: table;
  table-layout: fixed;
  width: auto;
  max-width: 448px;
  height: 56px;
}

.mydiv span {
  display: table-cell;
  vertical-align: middle; 
  overflow: hidden;
}

<div class="mydiv">
  <span></span>
</div>

这在大多数情况下都可以正常工作，因为默认情况下，如果文本长于一行，则换行符会在最近的 space 处换行，并且单词永远不会 divided into half-字。好

但是，在句子没有 space 的唯一情况下（这永远不会发生，但人就是人），界面会中断，然后长词将保留在一行上。

有没有办法确定 css 的优先级，这样，如果有 space，则在不切断单词的情况下切断句子（自动换行：换行；）但是如果单词比一行大，换行，切割单词（word-break: break-all;）以避免视觉上的灾难。按照这个顺序。

到目前为止，如果我使用"word-wrap: break-word;"，一个长单词将保留在一行中，无论其长度如何，如果我使用"word-break: break-all;"，即使有[=]，单词也会被打断43=]s 以前可用。 none 这些标准解决方案正在提供帮助。

如有任何帮助，我们将不胜感激。

我想要一个 CSS 解决方案，最好，但如果不可能，一个 JS/jQuery 解决方案也可以。

PS：我需要 div 具有自动宽度和最大宽度，我需要跨度保持 table-cell。

Answer 1

您可以使用 word-wrap: break-word 来完成，但您必须设置 width 属性的 value 到 100% 以启用 响应能力 :

.mydiv {
  display: table;
  table-layout: fixed;
  width: 100%; /* responsiveness */
  max-width: 448px;
  height: 56px;
  border: 1px solid; /* just for demo */
}

.mydiv span {
  display: table-cell;
  vertical-align: middle; 
  overflow: hidden;
  word-wrap: break-word; /* added */
}

<div class="mydiv">
  <span>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</span>
</div>
<br>
<div class="mydiv">
  <span>short word ... short word ... short word ... short word ... short word ... short word ... short word ... short word ...</span>
</div>

css 只有在没有空格时才断词

css breaking words only if no spaces

html

css

word-wrap

word-break