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，如果有空格，句子被剪切而不剪切单词（自动换行：break-word;）但是如果单词大于一行，则换行，剪切单词(word-break: break-all;) 避免视觉上的灾难。以该顺序。

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

任何帮助，将不胜感激。

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

PS：我需要 div 具有最大宽度的自动宽度，并且我需要跨度保持表格单元格。

Answer 1

您可以使用 来做到这一点，word-wrap: break-word但您必须将属性的值设置为启用响应：width 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>