HTML有趣的文本不自动换行问题

最新推荐文章于 2024-09-29 18:50:37 发布

原创最新推荐文章于 2024-09-29 18:50:37 发布 · 1.2w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #border #测试 #css #浏览器 #table

Microsoft 同时被 2 个专栏收录

60 篇文章

订阅专栏

JAVA

24 篇文章

订阅专栏

本文探讨了IE浏览器中不同文本内容对于自动换行的影响，并提供了几种实现文本强制换行的方法，包括使用CSS属性word-wrap和word-break。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天同事做一个文本自动换行的效果。比如一个字符串"12345678901234567890"，由于宽度只有50px，所以想到达到以下这样的效果

123456
789012
345678
90

HTML代码如下：

以前自己理解的是缺省就会自动换行，结果测试总不成功，真是郁闷，难度和字符串有关。

果然，字符串"我想回家我想回家"又可以换行成功。

于是仔细分析了一下，终于理解了，原因IE浏览器的缺省换行是不会断开单词的，"12345678901234567890"字符串中间没有任何分隔符，所以它认为是一个不可断开的单词，因此以不换行处理。字符串"我想回家我想回家"有汉字，词法解析时认为双字节字符都可以分开，所以就正确换行了。

如果在字符串中间加一个空格也行，但是逗号不行。

查了一上css参考手册，如果要强制换行的话，可以设置对象的CSS属性word-wrap="break-word"，或者设置word-break="break-all"

测试代码如下所示

<HTML>
 <HEAD>
 </HEAD>
 <BODY>
<TABLE border=1>
 <TR>
    <TD width=50px>12345678901234567890</TD>
 </TR>
 </TABLE>
<br/>
<TABLE border=1>
 <TR>
    <TD width=50px>我想回家我想回家</TD>
 </TR>
 </TABLE>
<br/>
<TABLE border=1>
 <TR>
    <TD width=50px>1234567890 1234567890</TD>
 </TR>
 </TABLE>
<br/>
<TABLE border=1>
 <TR>
    <TD width=50px style="word-wrap:break-word">12345678901234567890</TD>
 </TR>
 </TABLE>
<br/>
<TABLE border=1>
 <TR>
    <TD width=50px style="word-break:break-all">12345678901234567890</TD>
 </TR>
 </TABLE>
 </BODY>
</HTML>