Question

我正在尝试找到一个解决方案，用于包装在shoutbox中非常长的单词。例如，如果有人写出文件路径，或者有人只是写了一堆废话。例如：

blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahnonsensenonsensenonsensenonsense

Shoutbox可以有多个宽度（取决于它所在的位置），因此设置外部标记的宽度是不合适的，因为内容需要扩展以填充页面上的宽度。现在在这个外部标签内部，有内部标签可以容纳每个内部标签。

现在，我已经做了一些关于此的功课，据说这会有效：

.yourclass(#youid)
{
   word-wrap: break-word; /* Internet Explorer 5.5+ */
   white-space: normal; /* Firefox */
}

但我需要在所有5个主要浏览器中使用它：Firefox，Internet Explorer 7和8，Opera，Chrome和Safari。所有5大浏览器都有解决方案吗？

注意：我不介意结合使用CSS，JS，PHP和/或任何其他语言来使其正常工作。

有没有人遇到过这个问题？有没有人解决过它？我看看php的函数wordwrap，但这对我没有帮助，因为它需要一些字符。如果我可以定义宽度（以像素为单位）并且单词超过此宽度，可以帮助将下一个字符包装到下一行。使用字符进行自动换行的问题在于这些字符可能具有不同的字体大小，并且它们不一致且完全没有帮助。也许有办法确定每个角色的宽度？如果这个宽度超过了Shoutbox的宽度，那么将它包裹到下一行？这可能确实有效，但我对如何确定这一点感到茫然。

有人可以帮帮我吗？谢谢:)）

以下是我使用上述CSS =＆gt;的链接http://acs.graphicsmayhem.com/spoogs/index.php

它实际上确实在Opera的所有3个喊叫声中包含Opera中的长篇词，有人可以在其他浏览器中测试并给我一些反馈吗？

Answer 1

word-wrap: break-word;确实是你要找的。不确定它是否适用于Opera，但其他人都应该工作。

Answer 2

您的选择（我认为）是：

使用不适用于所有浏览器的解决方案，或
使用CSS overflow:auto或overflow:hidden来保留容器大小让不间断的话语流过边缘，或者
中断字符数限制（在服务器或客户端上）并“中断”无意义文本，或
对各种文本进行一些快速（但对用户可见）的破坏和重新破解字符限制，直到找到scrollWidth <= clientWidth的情况。（这将需要重复setTimeout次调用，以允许浏览器在您之后重新流动在你衡量效果之前改变。）

我想你也可以使用基于已知字体大小和测量宽度的粗略启发式，但这也不符合您的准确性标准。我很遗憾地说你想要的东西（据我理解）使用手头的技术是不合理的。

Answer 3

我建议您使用以下两种方法：

截断（）：http://phpcode.mypapit.net/truncate-a-very-long-text-with-php-function/33/
省略号（）：http://brenelz.com/blog/creating-an-ellipsis-in-php/

否则，您可以通过设置溢出隐藏来使用CSS。

希望有帮助

在Shoutbox中包装长字

3 个答案: