在 Shoutbox 中包装长词答案

【问题标题】：Wrapping long words in a Shoutbox在 Shoutbox 中包装长词
【发布时间】：2010-11-17 05:05:27
【问题描述】：

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

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 的链接 => http://acs.graphicsmayhem.com/spoogs/index.php

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

【问题讨论】：

CSS 不会有太大帮助，用-<br/> 替换一定长度后的文本可能值得考虑
就像我说的，某些长度对我没有任何帮助，因为字符大小可以是不同的大小。因此，如果有人将字体大小设置为 20pt，它将超过宽度，字符较少。没用，不过还是谢谢。

标签： php javascript css word-wrap

【解决方案1】：

word-wrap: break-word; 确实是您正在寻找的。不确定它是否适用于 Opera，但其他人应该都可以。

【讨论】：

是的，它确实在 Opera 中工作。但是不了解所有其他浏览器，也许您可以在其他浏览器中进行测试：acs.graphicsmayhem.com/spoogs/index.php 并告诉我。谢谢 :) 这里有 2 个相同的喊话框实例，其中的单词非常长。我没有安装 IE、Firefox、Safari 和 Chrome。目前只安装了 Opera，实际上在 Opera 中封装得很好。
@SoLoGHoST：在为 Web 开发时，您确实需要安装所有您关心的浏览器。
可以在 Chrome、FF、IE8 和 Safari 中使用，但 Espen 是对的，你应该在你的开发盒中安装所有这些浏览器。
其实在IE8下是不行的。不知道你在说什么。在 IE 7 中也不起作用。
考虑到 word-wrap 从 5.5 开始是一个专有的 IE 属性，这很奇怪

【解决方案2】：

您的选择（在我看来）是：

使用不适用于所有浏览器的解决方案，或
使用 CSS overflow:auto 或 overflow:hidden 保留容器大小同时让完整的话语流过边缘，或
打破字符限制（在服务器或客户端上）并“打破”无意义的文本，或者
在不同的地方快速（但对用户可见）对文本进行拆分和重新拆分字符限制，直到找到scrollWidth <= clientWidth 的情况。（这将需要重复 setTimeout 调用以允许浏览器在您改变，然后才能衡量效果。）

我想您也可以使用基于已知字体大小和测量宽度的粗略启发式算法，但这也不符合您对准确性的标准。我很抱歉地说使用手头的技术无法合理地实现您想要的（据我所知）。

【讨论】：

【解决方案3】：

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

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

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

希望有所帮助

【讨论】：