只有没有空格才能打破单词

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