如何在HTML中包含没有空格的长行？

Question

如果用户键入一条没有任何空格或空格的长行,它将通过比当前元素更宽来打破格式化.就像是:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA ................................................. .................................................. ..........................................

我试过wordwrap()在PHP中使用,但问题是如果有链接或其他一些有效的HTML,它会中断.

CSS中似乎有一些选项,但它们都不适用于所有浏览器.在IE中查看自动换行.

你怎么解决这个问题？

Answer 1

在CSS3中:

word-wrap:break-word

Answer 2

我试图解决同样的问题,我在这里找到解决方案:

http://perishablepress.com/press/2010/06/01/wrapping-content/

解决方案:向容器添加以下CSS属性

div {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

这个想法是全部使用它们,以便您获得更好的跨浏览器兼容性

希望这可以帮助

Answer 3

我喜欢使用overflow: autoCSS属性/值配对.这将以您希望它出现的方式呈现父对象.如果父级中的文本太宽,则滚动条会出现在对象本身中.这将使结构保持您希望它的外观,并为观看者提供滚动查看更多内容的功能.

编辑:与之overflow: auto相比的好处overflow: scroll是,auto滚动条仅在存在溢出内容时出现.使用时scroll,滚动条始终可见.

Answer 4

我没有亲自使用过它,但是Hyphenator看起来很有前途.

另请参阅相关(可能重复)的问题:

• css/js中的自动换行
• 谁解决了长字破坏我的div问题？(提示:不是stackoverflow)

Answer 5

我很惊讶没有人提到我最喜欢的解决方案之一,即<wbr>(可选的换行符)标签.它在浏览器中得到了相当好的支持,并且基本上告诉浏览器它可以在必要时插入换行符.还有相关的零宽度空格字符,​含义相同.

对于上面提到的用例,在网页上显示用户评论,我会假设已经存在一些输出格式以防止注入攻击等.因此,将这些<wbr>标记添加N到太长的单词中的每个字符或链接中都很简单.

当您需要控制输出的格式时,这尤其有用,CSS并不总是允许您这样做.

Answer 6

我会把帖子放在一个div中,它有一个固定的宽度设置溢出来滚动(或根据内容完全隐藏).

所以喜欢:

#post{
    width: 500px;
    overflow: scroll;
}

但那只是我.

编辑:作为cLFlaVA指出...这是更好地使用auto然后scroll.我同意他的看法.