css 有没有办法在div中对长单词进行自动换行?

hkmswyz6  于 2022-12-24  发布在  其他
关注(0)|答案(6)|浏览(175)

我知道Internet Explorer有自动换行的样式,但我想知道是否有跨浏览器的方法对div中的文本进行自动换行。
最好是CSS,但JavaScript片段也可以工作。
我指的是长线。

hm2xizp9

hm2xizp91#

阅读最初的评论,rutherford正在寻找一种跨浏览器的方式来 Package 完整的文本(从他对IE的自动换行推断出来,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中测试过)

atmip9wb

atmip9wb2#

前面的大多数答案在Firefox 38.0.5中对我不起作用。

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

文件:

vwhgwdsa

vwhgwdsa4#

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 */
}

非常感谢

ej83mcc0

ej83mcc05#

正如大卫提到的,默认情况下,DIV * 会 * 换行。
如果你指的是很长的没有空格的文本字符串,我所做的就是在服务器端处理这个字符串并插入空的span:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

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

eulz3vhy

eulz3vhy6#

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

相关问题