时间戳

首页 > 解决方案 > 逐字打断，如果没有空格就打断

css - 逐字打断，如果没有空格就打断

问题描述

如果可能，我会尝试逐字打断文本，如果没有 - 无论如何都要打断，这样布局就不会消亡。这在谷歌浏览器中默认工作并正确包装，但在 Firefox 中不起作用。

.a {
  width: 200px;
  word-wrap: break-word;
  display: inline-block;
  white-space: normal;
  word-break: break-word;
}

.a>div {
  text-align: left;
  display: inline-block;
}
<div class="a">
  <div>

    achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri

  </div>
</div>

http://jsfiddle.net/prswjktc/12/

可以通过max-width: 100%;在小提琴中添加案例来解决该问题，但我正在寻找替代解决方案。（我也不能删除内部 div）。

标签： css

解决方案

开始了 ：-）

  1. 将您的单词（或术语）放入<span>s。

  2. 调成

    • display: inline-block（所以他们得到了他们需要的所有宽度）
    • max-width: 100%; overflow: hidden（所以，是的，如果列超过，会有一个截断）
    • overflow-wrap: break-word（所以如果有砍断，他就会休息
    • 遗留备份（想想-moz-whatever）：word-wrap: break-word

代码：

span
  display: inline-block
  max-width: 100%
  overflow-wrap: break-word
  word-wrap: break-word

完整的 Codepen

推荐阅读