有没有一种方法可以将div中的长单词换行?


172

我知道Internet Explorer具有自动换行样式,但是我想知道是否有跨浏览器的方法可以对div中的文本进行这种操作。

最好是CSS,但JavaScript代码片段也可以正常工作。

编辑:是的,指的是长串,为人们加油!


7
自动换行默认情况下发生。如果没有单独的单词,您是说要换行吗?
昆汀,

Answers:


312

卢瑟福在阅读原始评论时,正在寻找一种跨浏览器的方式来包装完整文本(由他对IE的自动换行使用,旨在破坏完整字符串的推断)。

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

我现在已经使用了这一堂课,并且像一个咒语。(注意:我仅在FireFox和IE中进行过测试)


旧帖子,但是当IE处于怪癖模式时,它似乎没有呈现空格。
杰里米(Jeremy)2012年

2
我正在使用Firefox 24.6.0,而word-wrap: break-word这实际上是有效的。
user545424 2014年

3
Word-wrap: break-word尽管现在由Microsoft创建,但它现在已经成为CSS 3标准的一部分,这将
起到

37

在Firefox 38.0.5中,大多数以前的答案对我不起作用。做到了...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

说明文件:


2
谢谢!这是唯一可行的答案(断字:全力以赴;对我
有用


12

Aaron Bennet的解决方案对我来说是完美的,但是我不得不从他的代码中删除此行-> white-space: -pre-wrap;因为它给出了错误,所以最终的工作代码如下:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

非常感谢你


1
亚伦·贝内特(Aaron Bennett)在您之前两年就提到了同样的答案。您在这里所做的事情不会增加价值。
AaA 2014年

6
嗨,您可以看到是否再次阅读了两个答案,我的意思是说Aaron的解决方案还可以,但是我在他所写的其中一行中遇到了错误,因此我将其更改为适用于我。也许我应该在他的回答中发表评论,我知道,对不起,谢谢
雨果

我必须添加此“空白:-pre-wrap”,然后才起作用:)
Ravi Khambhati

0

大卫提到,资料核实默认情况下换行。

如果您指的是很长的文本字符串,没有空格,那么我要在服务器端处理字符串并插入空的跨度:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

这不是确切的,因为字体大小等存在问题。如果容器的大小可变,则span选项有效。如果是固定宽度的容器,则可以继续并插入换行符。


@TomHert真的很奇怪。虽然,嗯,IE浏览器。它永远都行不通。也就是说,这是5年前发布的。CSS3现在提供了一些更好的自动换行选项,IE可能会适应developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
DA。

是的,我知道,我为不得不尝试的解决方案的简单性而感到震惊:)
Tom Hert 2014年

0

您可以尝试指定div的宽度,无论是以像素,百分比还是ems为单位,届时div都将保持该宽度,并且文本将自动在div内换行。


尝试设置10px宽度...,然后使用长度超过10px的单词
Paul Zahra
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.