将长单词封装在Shoutbox中
我正在尝试找到一种解决方案来将非常长的单词包装在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 => 的链接http://acs.graphicsmayhem.com/spoogs/index.php
实际上确实如此将 Opera 中的非常长的单词包含在 Opera 的所有 3 个喊叫中，有人可以在其他浏览器中进行测试并就此提供一些反馈吗？
I'm trying to find a solution for wrapping words that are extremely long within a shoutbox. For example, if someone writes out a filepath or if someone just writes a bunch of nonsense. For example:
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahnonsensenonsensenonsensenonsense
The Shoutbox can have multiple widths (depending on where it's located), so setting a width for the outer tag would not be appropriate, since the content needs to expand to fill up the width on the page. Now inside this outer tag, there are inner tags that hold each shout within it.
Now, I've done some homework on this and it's been said that this will work:
.yourclass(#youid)
{
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: normal; /* Firefox */
}
But I need this to work in all 5 Major Browsers: Firefox, Internet Explorer 7 and 8, Opera, Chrome, and Safari. Is there a solution for all 5 Major Browsers?
Note: I don't mind combining CSS, JS, PHP, and/or any other language to get this to work right.
Has anyone experienced this issue? Has anyone ever resolved it? I look at php's function wordwrap, but this doesn't help me, since it wants a number of characters. Might help if I could define a width in pixels and if the word exceeds this width, to wrap the next character onto the next line down. The problem with using characters for a word wrap is that these characters can have different font sizes, and it will NOT be consistent and will NOT help at all. Perhaps there is a way to determine the width of each character? And if this width exceeds the width of the Shoutbox, than wrap it down to the next line? That might actually work, but I'm at a loss for how to determine this.
Can someone please help me? Thanks :)
Here is the link where I am using the above CSS => http://acs.graphicsmayhem.com/spoogs/index.php
It actually does wrap the very long word in Opera in all 3 of the shouts in Opera, can someone please test in other browsers and give me some feedback on this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
word-wrap: break-word;确实是您正在寻找的东西。不确定它在 Opera 中是否有效，但其他应该都可以。word-wrap: break-word;is indeed what you are looking for. Not sure if it works in Opera, but others should all work.您的选择（据我所知）是：
overflow:auto或overflow:hidden来保留容器尺寸同时让完整的单词流过边缘，或者
字符限制，直到您发现
scrollWidth <= clientWidth的情况。（这将需要重复
setTimeout调用，以允许浏览器在您的更改，然后才能测量效果。）
我想您还可以使用基于已知字体大小和测量宽度的粗略启发式，
但这也不符合您的精确性标准。我很遗憾地说
使用现有技术不可能合理实现您想要的（据我所知）。
Your choices (as I see it) are:
overflow:autooroverflow:hiddento preserve the container sizewhile letting the unbroken words flow past the edge, or
character limits until you find a situation where
scrollWidth <= clientWidth.(This will require repeated
setTimeoutcalls to allow the browser to re-flow after yourchange, before you can measure the effect.)
I suppose you could also use a rough heuristic based on a known font size and measured width,
but that also wouldn't meet what appear to be your criteria for exactness. I'm sorry to say
that what you want (as I understand it) is not reasonably possible using the technology at hand.
我建议您使用以下两种方法：
Truncate(): http://phpcode.mypapit.net/truncate-a-very-long-text-with-php-function/33/
省略号(): http://brenelz.com/blog/creating-an-ellipsis-in-php/
否则，您可以使用 CSS通过设置溢出被隐藏。
希望有帮助
I suggest you use two method below:
Truncate(): http://phpcode.mypapit.net/truncate-a-very-long-text-with-php-function/33/
Ellipsis(): http://brenelz.com/blog/creating-an-ellipsis-in-php/
Otherwise, you can use CSS by set overflow is hidden.
Hope that help