网页中英文长短不一的几种解决办法

其实只要我们仔细观察国外的网站，发现他们无论是在banner还是内容处，并不会刻意将英文段落每行结尾处强制对齐。

对齐是中文的做法，工作中发现很多国内的网站在处理英文版的时候总是会要求英文跟中文一样，结尾处要对齐。对齐后看下来就是一整版，于是就诞生了hyphens:auto等这样的解决方案。然而在专业看来，并不符合外国用户的认知和审美。

那如果因为文案原因实在参差不齐得太难看怎么办呢？分析发现外文网站用了这些方法来控制：

1、用段落宽度（width/max-width）

如果是文案居中对齐的段落，最适用这种方案。当然对单边对齐微调也是不错的。英文在用宽度控制上比中文更加精确。

2、文字大小（font-size）

学习的时候就被教导中文要用偶数，用奇数文字会模糊；中文大小最小12px太小不利于阅读等等。到了英文这边，既可以设置奇数大小，也可以小于12px。所以利用这个特性，也可以进行段落控制。

3、边距控制（margin-right/padding-right）

如果用li写出来的段落某一个li里的文案差距太大，那可以单独给这个li设置一个右边距。边距值可以设置为百分之零点几或者百分之几。

4、文字间距（letter-spacing）

文字间距可以设置为0.1px的。对微调来说还是蛮实用。

实际工作中，需要灵活运用 - “看菜吃饭”。

---

XMind

---

 

github-banner

github-内容列表

---

 

Apple官网

 

Apple产品简介

---

adobe color

 

---

 以上都是一些大型网站的文字块截图。事无绝对，要老板说我就要对齐，难道我们还拿着外文网站据理力争么？没有原因和对错，只因规则是人定的。