CSS如何在非空格长单词处换行？

Question

假设我有这段话

iamaverylongwordthathasnospace yehey

当我使用 word-wrap: break-word; 时，它变成了

iamaverylongwordthathas
nospace yehey

这很好...但是当我尝试

iama verylongwordthathasaspace yehey

它变成了

iama
verylongwordthathasaspace
yehey

我的问题是如何使段落看起来像这样

iama verylongwordthathas
nospace yehey

它将在空格处换行，但强制在长单词处断开？

- user3204806

---

定义“断开长单词”。什么是“单词”，以及按照哪些规则应该断开它们？这个问题经常以模糊的表述被问到，大多数回答都是错误的（或者在非常特殊的情况下可能部分正确）。 - Jukka K. Korpela

@user3204806 你有没有找到这个问题的答案？它确实还没有得到解答。 - electronixG

@electronixG - 我认为你需要解释一下为什么"word-break: break-all;绝对不是一个好的解决方案"。它有什么问题？ - Alohci

Answer 1

你在寻找 word-break: break-all;

这里有一个例子。我把背景设为黑色，这样你就能看到它的换行位置：JS Fiddle

HTML

<div>iama verylongwordthathasaspace yehey</div>

CSS

div {
    width: 120px;
    word-break: break-all;
    background: black;
    color: white;  
}

来源: CSS-Tricks: 单词断行

- Derek Story

Answer 2

使用 "word-break: break-all;"（适用于英语或以拉丁为基础的语言）将在任何字符处换行。这意味着一个非常短的单词（两个或三个字符长）可能会根据可用空间而断开得很尴尬。重新调整容器（在下面的演示中从右下角）以查看break-all和break-word之间的差异...

注意：这些仅仅是CSS解决方案。要对单词和字符进行更复杂的操作，需要使用JavaScript。

[draggable=true] {
  cursor: move;
}

.resizable {
  background: #e3e8ee;
  overflow: auto;
  resize: both;
  max-width: 360px;
  max-height: 360px;
  min-width: 140px;
  min-height: 360px;
  padding: .5em;
}

.resizable div {
  background: #fff;
  font: 1em/1.1em Arial, Helvetica, Sans-serif;
  margin-bottom: .5em;
  padding: .25em;
}

.resizable div h2 {
  font-size: 1em;
  font-weight: bold;
  margin: .1em 0;
}

.break-all span {
  word-break: break-all;
}

.break-word span {
  word-break: normal;
  word-wrap: break-word;
}

.hyphen span {
  hyphens: auto;
}

.truncate span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div draggable="true" class="resizable">
  <div class="break-all" lang="en">
    <h2>Break-all</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
  <div class="break-word" lang="en">
    <h2>Break-word</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
  <div class="break-word hyphen" lang="en">
    <h2>Bk-wd Hyphens</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
  <div class="break-word hyphen truncate" lang="en">
    <h2>Bk-wd Truncate</h2>
    <span>iama verylongwordthathasaspace yehey</span>
  </div>
</div>

- jottin

---

编辑您的回答，将相同的文本“iama verylongwordthathasaspace yehey”包含在连字符示例中。我认为这是我们能够实现所期望的换行效果的最接近方式。 - Tim R

最后两个例子已经使用原始问题中的文本进行了更新。然而，我认为使用真实的单词可以更好地展示格式在实际中的行为。这里有一个fiddle，任何人都可以编辑：https://jsfiddle.net/tkm31reo/7/ - jottin

我刚刚意识到我忘了说“请”。我之所以提出这个请求，是因为在同一段文字上比较和查看差异更容易。我相信word-wrap: break-word; hyphens: auto;是对于这个问题最好的解决方案。 - Tim R

...并查看小提琴（上一个评论）以使用真实的单词。我刚刚注意到这个问题是9年前提出的。我很惊讶自动换行和连字符在不使用js的情况下已经达到了最好的效果。无论如何，截断的效果已经变得更好，但同时使用连字符和行截断确实存在问题。 - jottin

Answer 3

保留空格的情况下换行长单词的行为

使用CSS属性的组合来实现您所需的行为：

• word-break: break-all; 此属性允许在超出容器宽度的情况下断开长单词。它强制长单词在任何字符处断开，甚至在单词内部，而不是溢出容器。

• white-space: pre-wrap; 此属性保留空格并允许文本在空格上换行。它还尊重原始文本中的换行符。

以下是适用于您情况的代码：

HTML

<div class="paragraph-container">
  iama verylongwordthathasaspace yehey
</div>

CSS（层叠样式表）：

.paragraph-container {
  white-space: pre-wrap;
  word-break: break-all;
}

您的输出将是：

iama非常长的单词，没有空格，耶嘿

希望对您有所帮助。

- Muhammad Ali

Answer 4

.your-class-name {
  overflow-wrap: break-word; /* Break long words */
  word-wrap: break-word; /* Same as overflow-wrap, for older browsers */
  max-width: some-value; /* Replace with desired container width */
}

<div class="your-class-name">
  iama verylongwordthathasnospace yehey
</div>

- Aman Khan