英文与中文的换行问题

大家都知道英文是在一个词内不允许断字换行的,如果有些BT的长度单词出现就会将表格或者层撑爆,尤其是加上BT的测试人员,更会让你难看,多么完美的页面咋就这样了。

  具体比较:

  1. <div?style=“width:200px;”>此容此容此容此容此容此此容此容此容此容此容此容此容此容此容此容</div> ??
  2. <div?style=“width:200px;”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> ??
  3. <div?style=“width:200px;?overflow:hidden”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> ??
  4. <div?style=“width:200px;?overflow:scroll;”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> ??
  5. <div?style=“width:200px;?word-break:?break-all”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> ??
  6. <div?style=“width:200px;?word-wrap:?break-word;”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> ??
  7. <div?style=“width:200px;?word-wrap:?break-word;?word-break:?break-all”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> ??
  8. <table?cellspacing=“0”?cellpadding=“0”??style=“table-layout:fixed;?width:202px;?word-break:break-all;”> ??
  9. ??<tr> ??
  10. ????<td>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td> ??
  11. ??</tr> ??
  12. ??<tr> ??
  13. ????<td>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td> ??
  14. ??</tr> ??
  15. </table>??



  相关CSS语法

语法:
word-break : normal; break-all; keep-all

参数:
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

语法:
word-wrap : normal; break-word

参数:
normal :  允许内容顶开指定的容器边界
break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也行发生

说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。

语法:
table-layout : auto; fixed

参数:
auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

说明:
设置或检索表格的布局算法。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 英文与中文的换行问题

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏