有没有办法在 div 中自动换行长单词？

Posted 2023-02-19

【中文标题】有没有办法在 div 中自动换行长单词？

【英文标题】：Is there a way to word-wrap long words in a div?

【发布时间】：2010-12-10 22:15:45

【问题描述】：

我知道 Internet Explorer 具有自动换行样式，但我想知道是否有跨浏览器的方法来处理 div 中的文本。

最好是 CSS，但 javascript sn-ps 也可以。

编辑：是的，指的是长字符串，干杯！

【问题讨论】：

默认情况下会自动换行。你的意思是当有没有单独的单词时换行？

【参考方案1】：

之前的大部分答案在 Firefox 38.0.5 中对我不起作用。这确实...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

文档：

word-break word-wrap

【讨论】：

谢谢！这是唯一有效的答案（断词：break-all；对我有用）

【参考方案2】：

Aaron Bennet 的解决方案对我来说非常有效，但我不得不从他的代码中删除这一行 --> white-space: -pre-wrap; 因为它给出了一个错误，所以最终的工作代码如下：

.wordwrap  
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */

非常感谢

【讨论】：

Aaron Bennett 在您之前 2 年提到过同样的答案。你在这里所做的并没有增加价值。

嗨，如果你再次阅读这两个答案，我的意思是 Aaron 的解决方案没问题，但我在他写的一行中遇到了错误，所以我只是将其更改为对我有用的解决方案。也许我应该在他的回答中发表评论，我知道，对不起，谢谢

我必须添加这个“空白：-pre-wrap”并且它起作用了:)

【参考方案3】：

阅读原始评论，卢瑟福正在寻找一种跨浏览器的方式来包装不间断文本（通过他对 IE 使用 word-wrap 来推断，旨在打破完整的字符串）。

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap  
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */

我已经使用了这个类一段时间了，它就像一个魅力。 （注意：我只在 FireFox 和 IE 中测试过）

【讨论】：

旧帖，但在 IE 处于 quirks 模式时似乎不会呈现空格。

我使用的是 Firefox 24.6.0，而 word-wrap: break-word 是实际工作的。

Word-wrap: break-word 虽然由 Microsoft 创建，但现在是 CSS 3 标准的一部分，这就是诀窍 :-)

【参考方案4】：

white-space: pre-wrap

quirksmode.org/css/whitespace.html

【讨论】：

死链接。请提供更全面的答案。

【参考方案5】：

您可以尝试为 div 指定宽度，无论是以像素、百分比还是 em 为单位，此时 div 将保持该宽度，然后文本将自动换行在 div 内。

【讨论】：

尝试设置 10px 宽度...然后使用大于 10px 的字词

【参考方案6】：

正如大卫所说，DIV 确实默认包装单词。

如果您指的是没有空格的很长的文本字符串，我所做的是在服务器端处理字符串并插入空跨度：

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

这并不准确，因为字体大小等存在问题。如果容器大小可变，则 span 选项有效。如果它是一个固定宽度的容器，你可以继续插入换行符。

【讨论】：

@TomHert 这真的很奇怪。虽然，嗯，IE。它永远不会起作用。也就是说，这是5年前发布的。 CSS3 现在有一些更好的自动换行选项，IE 可以适应 developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

是的，我知道，我只是对这个解决方案的简单性感到震惊，我不得不尝试一下：)