昨天我遇到了经典的“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;}
然后,移动设备上就不会出现页面宽度被文本撑宽的问题了。