文字截断是 Web 开发中非常普遍的一个需求,原因无他,很多时候我们无法确定展示文本的容器的宽度,如果不使用文字截断,要么文本被生硬的截断隐藏、要么文本破坏了预期中的布局。
Tailwind CSS 提供的文字截断的原子类:
css
.truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
这 3 组 CSS 规则共同作用才可实现用 ...
截断文字的效果,缺一不可。
overflow: hidden
表示容器空间不足时内容应该隐藏,而非默认的visible
完全展示white-space: nowrap
表示文本容器宽度不足时,不能换行,其默认值为normal
,该行为不太好预测,但大部分情况下,它等同于 wrap 即文本尽可能的换行text-overflow: ellipsis
指定文本省略使用...
,该属性默认值为clip
,表示文本直接截断什么也不显示,这样展示容易对用户造成误解,因此使用...
更合适
接下来介绍一个在 PC Web 上很实用的交互效果:在需要截断的文本后面,紧跟一个鼠标 hover 上去才会展示的按钮, 执行一些和省略文本强相关、轻操作的动作。
如图所示,鼠标 hover 表示的按钮可以用来快速的编辑「标题」。下面介绍一下它的纯 CSS 实现。
首先,我们来实现一个基础版的。
代码:
html
<div class="container">
<p class="complex-line truncate">
<span class="truncate">海和天相连成为海岸线</span>
<span class="icon">❤️</span>
</p>
<p class="truncate">鱼和水相濡以沫的世界</p>
</div>
<style>
.truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.container {
max-width: 100px;
}
.complex-line {
display: flex;
}
.complex-line:hover .icon {
display: block;
}
.icon {
display: none;
}
</style>
一些重点:
- 容器
.container
必须是宽度固定、或者最大宽度固定的,以此确保容器不会因为子元素无止境的扩充。比如你可以设置容器的width
或max-width
。在某些情况下,即使设置了max-width
但不生效,此时可以尝试添加overflow: hidden
。 - 含有按钮的行
.complex-line
和子元素中展示文字的标签(.complex-line
下的span.truncate
),都要添加文字截断类.truncate
。 - 按钮
.icon
默认不展示,hover 当前行的时候才展示,这个也很常规,主要通过设置其display
属性实现。 - 🌟 接下来一步很巧妙,就是为含有按钮的行
.complex-line
,设置其为 Flex 容器,这主要是借助 Flex Item 的flex-shrink
属性默认值为1
的特性,允许含有文字的 Flex Itemspan.truncate
在按钮span.icon
需要展示的时候进一步缩放,腾出空间,用于完整展示按钮。
这样便实现了基础版的文字截断 + 可以自动显示隐藏按钮的交互。
接下来再看看文章开头提到的这个交互:
它和基础版的样式最大的不同就是它是多列的,这里可以使用 Grid 网格布局实现。
html
<div class="container">
<label>标题:</label>
<p class="complex-line truncate">
<span class="truncate">高质量人才生产总基地</span>
<span class="icon">✏️</span
</p>
<label>编号:</label>
<p class="truncate">No.9781498128959</p>
</div>
<style>
.container {
display: grid;
grid-template-columns: auto 1fr;
/** ... */
}
</style>
其他样式代码和基础版中的一致,不再赘述。
总结
为了实现本文介绍的这种交互,应该确保:
- 容器的宽度或最大宽度应该是固定的
- 按钮前面的那个展示文字的元素,和它们的父元素,都应该有
.truncate
文字截断效果 - 按钮的父元素应该为 Flex 容器,使得按钮显示时,文字所在标签可以进一步缩放