CSS IS AWESOME问题

昨天我遇到了经典的“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/ -->

CSS IS AWESOME

(以上图片使用中文版 Windows 10 系统,Chrome 56 浏览器渲染)

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

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

昨天的问题是这样的:
Playlist is Awesome
(此图经过缩小)

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

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

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

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

word-wrap 和 word-break 属性

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

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

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

这两个属性的效果是不一样的,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; 则不会有省略号。

效果如下:
overflow

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

代码如下:

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

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

发表评论