Question

如何显示长字符串，网站地址，字符或符号集以及自动换行符以保持div宽度？我猜各种各样的文字包装。通常添加一个空间有效，但有一个CSS解决方案，如自动换行吗？

例如它（非常鼻子）重叠div，强制水平滚动等。 wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwww

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

Answer 1

之前已经在这里提出过这个问题：

长话短说：

对于CSS解决方案，您可以：overflow: scroll;强制元素显示滚动条，overflow:hidden;只删除任何额外的文本。有text-overflow:ellipsis;和word-wrap: break-word;但它们只是IE浏览器（break-word在CSS3草案中，但是，从现在起5年后它将成为解决方案。）

最重要的是，如果将文本包装到下一行是非常重要的，那么唯一合理的解决方案就是注入（软连字符），<wbr> （字断符号），或字符串服务器端的（零宽度空格，与相同的效果减去连字符）。但是，如果你不介意Javascript，那么hyphenator似乎非常可靠。

Answer 2

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

如果您的浏览器矩阵中没有FF 2.0，那么使用这些是可行的解决方案。不幸的是，它没有连接前一行，其中单词被打破，这是一个排版的噩梦。我建议使用Paolo建议的连字符，这是一种不引人注目的JavaScript。对于非JavaScript启用的用户，后备将是没有连字符的破碎词。我暂时还能忍受。这个问题很可能出现在CMS中，网页设计师无法控制输入的内容或可以实现换行符和软连字符的位置。

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

Answer 3

word-break:break-all有效处理

Answer 4

刚刚在here上提到这一点，但可能与此问题更相关。不久之后，最好的酒店将是溢流包装。如果实施的最佳价值是：

* {
   overflow-wrap:hyphenate. 
}

在写iphone或firefox时，似乎没有任何方式支持Doesen，并且溢出包装：连字符甚至不在工作草案中。

在此期间我会使用：

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

Answer 5

display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you

Answer 6

我使用代码来阻止所有长字符串，网址等等。

 -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;

Answer 7

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

...总有一天

Answer 8

正常情况下，单元格会自然地执行此操作，但您可以使用以下命令强制执行此行为：

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

Answer 9

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

Answer 10

这似乎可以解决最新的Chrome问题：

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

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

wordwrap一个很长的字符串

10 个答案: