有感于中外网站文字布局上的差异

有幸工作于一个大型外国门户网站，来之，欣欣然。

 

有关文字布局，我似乎已经很老练了。块布局。

 

比如：

 

<div style="width:70px; height:120px; line-height:20px; background-color:orange;">
阿迪房间啊开发卡——机了房间/觉得-卡设计费拉尔</div><br />
<div style="width:70px; height:120px; line-height:20px; background-color:orange;">
we create Player/Tuner-Free</div>

这就是我遇到的中文字和拉丁文字的差异。中文字是方块字，如果放不下，就自动换行到下一行，没有词组。但是拉丁文字是字母组成单词并含有/，它认为这是一个单词。这就是老生常谈的长单词问题。

 

在淘宝UED那里见到过处理长单词的方法，老哥他一边解释一边骂QA测什么adjlkfjaljf这样的单词啊，哪会有啊，可是你不知道Congratulation吗？又或者Player/Tunerplayer吗？这样的测试不是没有用的，呵呵。

 

我第一次使用的方法是：overflow:hidden;本人很娴熟于这个属性。

 

可是结果呢？

 

这种方法对于中文字是可以的，但是拉丁文字却不行。因为中文字有相同的字宽，只要你试了几个字不会切到字，那么换什么字都无所谓。但是英文字不等字宽，这种方法显然是不行的。

 

然后尝试第二种方法：word-wrap:break-word;

虽然截断单词不尽人意，并且没有加连字符，两害相权取其轻，所以就采用了这种方法。

 

晒一下，供大家参考。