我们在写CSS时，尤其网站内容是英文等拉丁字母词语的时候，特别是在小屏幕上，经常会遇到一个问题：当行内出现很长的英文单词或者url的时候，会出现如下自动换行的问题：

1. 长英文、长链接，溢出超过显示范围，没有换行；
2. 英文单词换行时，在单词中断开了；

换吧，会形成半行空白，不换吧，又会破坏整体性。

按照英文的标准处理办法，是使用连字符“-”把必须在单词内的换行的词语连接起来，表示这是一个整体，但在CSS中，尤其当站点语言主要是中文的时候，则没有太好的解决办法。

一般情况下我们用css的word-break属性或者word-wrap属性来解决英文单词词内换行的问题：

自动换行

word-wrap: break-word;
word-break: normal;

英文单词不拆词

word-break: keep-all;  //只能在半角空格或连字符处换行。
word-wrap: break-word; //当单词太长时，先尝试换行，换行后还是太长，单词内还可以换行。
white-space: pre-wrap; //保留所有的空格和回车，但是允许折行，注意：出现大量空白时，可不加。

英文单词两端对齐、单词不拆词换行

word-break: keep-all; 
word-wrap: break-word; 
white-space: pre-wrap;
text-align: justify;

如果你非要遵循英文的排版规范，使用连字符的话，办法是有，但在中英混合的情况下可能会没用，那就是使用css的hyphens属性。

hyphens生效的先决：只有当html中定义的lang 属性存在且为“en”时才有合适的连字符字典可用时，浏览器才会使用连字符。

hyphens：manual; / *手工设定，默认值，只有在单词中手工插入 ­换行符才会换行 * /
hyphens：none; / *无。即使单词中有换行符，也不会换行，只会在空白处换行* /
hyphens：auto; / *自动。浏览器在适当的位置自动插入连字符换行* /

据说支持这个属性的浏览器少之又少，包括天下第一Google chrome的支持也不是很好，反正我自己尝试没有成功。