74

如何使用自动换行符显示长字符串、网站地址、单词或符号集以保持 div 宽度？我猜是一种自动换行。通常添加空格是可行的，但是否有 CSS 解决方案，例如自动换行？

例如，它（非常讨厌）重叠 div，强制水平滚动等。

我可以在上面的字符串中添加什么以使其整齐地放在 div 或浏览器窗口的几行中？

4

10 回答 10

87

这个问题之前在这里被问过：

长话短说：

就 CSS 解决方案而言，您有：overflow: scroll;强制元素显示滚动条并overflow:hidden;截断任何额外的文本。有text-overflow:ellipsis;，word-wrap: break-word;但它们只是 IE（break-word但是在 CSS3 草案中，所以这将是 5 年后的解决方案）。

底线是，如果通过将文本换行到下一行来阻止这种情况发生对您来说非常重要，那么唯一合理的解决方案是注入 &shy;（软连字符）、<wbr>（分词标记）或&#8203;（零宽度空格，与&shy;字符串服务器端中的减号连字符相同的效果。但是，如果您不介意 Javascript，那么有一个似乎相当可靠的连字符。

于 2009-05-13T06:09:53.663 回答
31

word-wrap: break-word;适用于 IE7+、FF 3.5 和支持 Webkit 的浏览器（Safari/Chrome 等）。要处理 IE6，您还需要声明word-wrap: break-all;

如果 FF 2.0 不在您的浏览器矩阵中，那么使用这些是一个可行的解决方案。不幸的是，它不会在单词被破坏的前一行连字，这是一个印刷噩梦。我建议使用 Paolo 建议的连字符，这是不显眼的 JavaScript。非 JavaScript 用户的后备将是不带连字符的断词。我暂时可以忍受。这个问题很可能出现在 CMS 中，其中网页设计者无法控制将输入的内容或可以实现换行符和软连字符的位置。

我查看了讨论 CSS3 中的断字的W3 规范。不幸的是，似乎有一些建议，但还没有具体的建议。似乎浏览器供应商还没有实现任何东西。我已经检查了 Mozilla 和 Webkit 的专有代码，但没有任何迹象。

于 2009-12-15T07:28:18.847 回答
30

word-break:break-all工作一种享受

于 2013-07-19T15:47:46.850 回答
11

刚刚在这里提到了这一点，但可能与这个问题更相关。很快最好的属性将是溢出包装。如果它得到实施，最好的价值是：

* {
   overflow-wrap:hyphenate. 
}

在 iphone 或 firefox 上撰写本文时，似乎还没有以任何方式得到支持，并且 overflow-wrap:hyphenate 甚至不在工作草案中。

同时我会使用：

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}
于 2012-04-27T02:37:03.273 回答
3 
显示：块；
溢出：隐藏；
文本溢出：省略号；
宽度：200px；// 或者任何最适合你的
于 2013-03-25T16:06:45.273 回答
3

我使用代码来防止所有长字符串、url 等..

 -ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

/* Non standard for webkit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
于 2014-02-14T07:21:28.897 回答
2

希望有一天我们可以访问word-wrapCSS3 中的属性：Force Wrapping: the 'word-wrap' property。

总有一天...

于 2009-05-13T06:19:24.660 回答
1

通常 Cells 会自然而然地执行此操作，但您可以使用以下命令强制 div 执行此行为：

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}
于 2013-01-02T01:55:09.870 回答
0

始终指定 line-height 属性 - 如果您不指定，可能会导致您的word-break: break-all;属性失败。

于 2014-11-20T11:16:58.753 回答
0

似乎这对最新的 Chrome 有用：

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

除了 Chrome，我没有检查任何浏览器。

于 2014-12-01T16:46:18.737 回答