CSS IS AWESOME问题

昨天我遇到了经典的“CSS is Awesome”问题

"CSS is Awesome" 是一个梗，它像下面这样：

你可以使用这样的代码得到它（不同字体和浏览器可能会有不一样的效果）：

<style>
  .css-is-awesome{
    font: 40px Arial;
    display: inline-block;
    border: solid 0.06em black;
    width: 3.25em;
  }
</style>

<div class="css-is-awesome">
  CSS IS AWESOME
</div>
<!-- 作者：夜光 来源：https://blog.61dpi.com/archives/93/ -->

（以上图片使用中文版 Windows 10 系统，Chrome 56 浏览器渲染）

此DIV宽度有限，无法容纳这一行文本。于是， IS 被放到了第二行， AWESOME 被放到了第三行。这叫做自动换行。

但是你会发现第三行的 AWESOME 超出了 Div 的边界。因为在西方国家的习惯中，英文单词中间是不能直接换行的。最多只能按音节拆分换行，且上一行末尾要加上_。（Visual Basic的多行语句也是类似的语法……）

昨天的问题是这样的：

（此图经过缩小）

与上面的情况一样，在这里，设备宽度就是上文中Div的宽度。

图片中，灰色部分是文件名所在的 li 标签的实际宽度，而文本超出了这个元素的宽度。在这个情况下，更改元素的宽度是没有意义的，整个页面宽度依然会被这行文本影响。

不过，似乎在 PC 上没有影响……

移动设备上的页面能够横向滚动是非常影响使用体验的，所以这是个很严重的问题。不过解决起来也很简单，有两种做法：

word-wrap 和 word-break 属性

可以使用这两个属性让文本强制换行，下面是例子：

使用 word-wrap: break-word; 的效果：

使用 word-break: break-all; 的效果：

这两个属性的效果是不一样的，word-wrap: break-word; 作用是 允许长单词或 URL 地址换行到下一行 ，而 word-break: break-all; 则是 允许在单词内换行 。所以你会看到第一张图中，只有 AWESOME 这个超长的单词被拆分成两行，第二张图中，CSS IS 每个单词后面的空白都被下一个单词所填满，每个空白和字符都当做一个独立的元素来进行换行处理。

如果单词都没有超过容器长度，使用 word-wrap: break-word; 时，遇到长单词的情况下，行末会留白，比较浪费空间。极端情况下会有一行一个单词这样的现象。

而 word-break: break-all; 则是没有了“英文单词”的概念，允许从单词的中间换行。虽然这样看起来会不太符合英文的书写习惯，但是会节省空间。

overflow:hidden 属性

其实这需要两个属性一起使用：

overflow:hidden;
text-overflow: clip | ellipsis;

使用 overflow:hidden; 隐藏超出边界的文本， text-overflow: ellipsis; 给文本被隐藏的部分加上省略号。如果使用 text-overflow: clip; 则不会有省略号。

效果如下：

最后我选择用word-break属性解决该问题，github commit的地址：
Private-Cloud-Music Commit

代码如下：

#playlist li {word-break: break-all;}

然后，移动设备上就不会出现页面宽度被文本撑宽的问题了。