html - 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>

这在大多数情况下都可以正常工作，因为默认情况下，如果文本长于一行，则在最近的空格处换行，并且单词永远不会被分成半个单词。 好。

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

有没有一种方法可以确定 css 的优先级，这样，如果有空格，则在不剪切单词的情况下剪切句子(word-wrap: break-word;)但如果单词大于一行，则换行，切断单词(word-break:break-all;)以避免视觉灾难。按照这个顺序。

到目前为止，如果我使用“word-wrap: break-word;”，一个长单词将保留在一行中，无论其长度如何，如果我使用“word-break: break-all;”即使之前有空位，单词也会被打断。 这些标准解决方案都没有帮助。

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

我最好使用 CSS 解决方案，但如果不可能，也可以使用 JS/jQuery 解决方案。

PS:我需要 div 具有自动宽度和最大宽度，我需要 span 保持表格单元格。

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>