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

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

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

今天同事做一个文本自动换行的效果。比如一个字符串"12345678901234567890",由于宽度只有50px,所以想到达到以下这样的效果
 
123456
789012
345678
90
 
HTML代码如下:
 
<TABLE border=1>
  <TR>
    <TD width=50px>12345678901234567890</TD>
  </TR>
</TABLE>
 
以前自己理解的是缺省就会自动换行,结果测试总不成功,真是郁闷,难度和字符串有关。
果然,字符串"我想回家我想回家"又可以换行成功。
于是仔细分析了一下,终于理解了,原因IE浏览器的缺省换行是不会断开单词的,"12345678901234567890"字符串中间没有任何分隔符,所以它认为是一个不可断开的单词,因此以不换行处理。字符串"我想回家我想回家"有汉字,词法解析时认为双字节字符都可以分开,所以就正确换行了。

如果在字符串中间加一个空格也行,但是逗号不行。
 
查了一上css参考手册,如果要强制换行的话,可以设置对象的CSS属性word-wrap="break-word",或者设置word-break="break-all"
 
测试代码如下所示
 
  1. <HTML>
  2.  <HEAD>
  3.  </HEAD>
  4.  <BODY>
  5. <TABLE border=1>
  6.  <TR>
  7.     <TD width=50px>12345678901234567890</TD>
  8.  </TR>
  9.  </TABLE>
  10. <br/>
  11. <TABLE border=1>
  12.  <TR>
  13.     <TD width=50px>我想回家我想回家</TD>
  14.  </TR>
  15.  </TABLE>
  16. <br/>
  17. <TABLE border=1>
  18.  <TR>
  19.     <TD width=50px>1234567890 1234567890</TD>
  20.  </TR>
  21.  </TABLE>
  22. <br/>
  23. <TABLE border=1>
  24.  <TR>
  25.     <TD width=50px style="word-wrap:break-word">12345678901234567890</TD>
  26.  </TR>
  27.  </TABLE>
  28. <br/>
  29. <TABLE border=1>
  30.  <TR>
  31.     <TD width=50px style="word-break:break-all">12345678901234567890</TD>
  32.  </TR>
  33.  </TABLE>
  34.  </BODY>
  35. </HTML>
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值