英文与中文的换行问题 | WEB前端开发

Web前端开发 • 10年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

2009
03-25

英文与中文的换行问题

愚人码头 html+css 围观0次留下评论编辑日期：2009-03-25 字体：大中小

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

　　具体比较：

view plaincopy to clipboardprint?

<div style=“width:200px;”>此容此容此容此容此容此此容此容此容此容此容此容此容此容此容此容</div>
<div style=“width:200px;”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div style=“width:200px; overflow:hidden”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div style=“width:200px; overflow:scroll;”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div style=“width:200px; word-break: break-all”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div style=“width:200px; word-wrap: break-word;”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div style=“width:200px; word-wrap: break-word; word-break: break-all”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
<table cellspacing=“0″ cellpadding=“0″ style=“table-layout:fixed; width:202px; word-break:break-all;”>
<tr>
<td>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
</tr>
<tr>
<td>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
</tr>
</table>

<div style=”width:200px;”>此容此容此容此容此容此此容此容此容此容此容此容此容此容此容此容</div> <div style=”width:200px;”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> <div style=”width:200px; overflow:hidden”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> <div style=”width:200px; overflow:scroll;”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> <div style=”width:200px; word-break: break-all”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> <div style=”width:200px; word-wrap: break-word;”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> <div style=”width:200px; word-wrap: break-word; word-break: break-all”>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div> <table cellspacing=”0″ cellpadding=”0″ style=”table-layout:fixed; width:202px; word-break:break-all;”> <tr> <td>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td> </tr> <tr> <td>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td> </tr> </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 : 　固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关

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

本文固定链接: http://www.css88.com/archives/257
转载请注明: 愚人码头 2009年03月25日于 WEB前端开发发表

最后编辑：2009-03-25

作者：愚人码头

这个作者貌似有点懒，什么都没有留下。

站内专栏站点