如何在 HTML 中实现文字自动换行？

Question

如何将超出一个 div（比如 200px）宽度的文本像 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 进行自动换行？

我接受任何形式的解决方案，例如 CSS、jQuery 等。

- Satya Kalluri

Answer 1

试试这个：

div {
    width: 200px;
    word-wrap: break-word;
}

- Alan Haggai Alavi

---

我是否错了，换行是CSS3的属性吗？ - Gab Royer

这是CSS3的代码，但它可以在几乎所有主流浏览器上运行，包括IE5.5到9版本。您可以在http://caniuse.com/#search=word-wrap查看更多信息。 - Jon Hadley

当使用word-wrap: break-word;时不起作用时，尝试使用word-break: break-all; /这个选择非常有效/。 - redochka

@redochka 但是当使用“word-break: break-all;”时，普通文本会在中间断开单词，这很丑...我们不能将两种行为混合吗？ - pawamoy

重要提示：应使用 word-break: break-all 而非 word-wrap: break-all。这是一个容易犯的错误。 - Simon_Weaver

word-break: break-word 给了我想要的功能。它可以将长单词断行，但也防止格式（如容器宽度）被破坏。而使用 word-break: break-all 只能做到后者。 - Ginger and Lavender

Answer 2

在Bootstrap 3中，确保白色空间未设置为“nowrap”。

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

- lukaserat

---

太好了。我尝试在Twitter Bootstrap 3面板主体上使用word-break: break-all，但它从未起作用。添加white-space:normal就解决了问题。 - coolboyjules

很好，我也需要在它起作用之前使用 white-space: normal;。 - radbyx

Answer 3

你可以像这样使用软连字符： aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa 这将显示为：

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

如果包含盒子不够大，或者

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

如果是的话。

- Kim Stebel

---

你将如何知道在哪里添加 ­？ - Kostas

像例子中的无意义字符怎么办？将aaaaaa...aaaaa转换为a­a­a­a­a­a­a...a­a­a­a，这样做可以吗？ - Kostas

正是我所寻求的。我喜欢它的害羞，直到必须行动为止;-) - w00t

如果要换行的单词是一个过于冗长的Java包名或类似的有多个点的字符串，则可以在每个点后添加 ­。这样做可以正常工作。 - dokaspar

这是在今天响应式网站中不好的方法。 - Omari Victor Omosa

Answer 4

div {
    /* Set a width for element */
    word-wrap: break-word
}

'word-wrap' 解决方案仅适用于IE和支持CSS3的浏览器。

最佳跨浏览器解决方案是使用服务器端语言 (php或其他) 来定位长字符串，并在其中定期插入HTML实体 '​'。这个实体可以很好地打破长单词，适用于所有浏览器。

例如：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

- Orr Siloni

---

在它们的正常间隔内放置HTML实体＃8203，但当您尝试复制文本并将其粘贴到其他地方时，中间会有一个随机的Unicode字符。 - user102008

Answer 5

这对我起作用了

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

- Amol

---

喜欢这种方法。覆盖了所有基础知识。谢谢！ - onmyway

Answer 6

如果单词中没有空格（比如长URL），可以跨越IE、Firefox、Chrome、Safari和Opera使用的唯一方法是：

div{
    width: 200px;  
    word-break: break-all;
}

我发现这是十分可靠的。

- Kyle Dearle

Answer 7

另一种选择也是使用：

div
{
   white-space: pre-line;
}

这将在所有支持CSS1的浏览器中设置您的所有div元素（几乎所有常见浏览器，包括IE 8及更早版本）。

- Andrew Marais

---

如果您有一个 <pre> 元素需要自动换行，那么这个方法可行，而 word-break 或 word-wrap 则不行。 - Pluto

Answer 8

Cross Browser

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

- Timeless

Answer 9

尝试这个 CSS 属性 -

overflow-wrap: anywhere;

- Akshay Chavan

Answer 10

<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>

- Manoj Alwis