分享：一个超实用的文字截断技巧

文字截断是 Web 开发中非常普遍的一个需求，原因无他，很多时候我们无法确定展示文本的容器的宽度，如果不使用文字截断，要么文本被生硬的截断隐藏、要么文本破坏了预期中的布局。

Tailwind 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 实现。

首先，我们来实现一个基础版的。

代码：

<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 Item span.truncate 在按钮 span.icon 需要展示的时候进一步缩放，腾出空间，用于完整展示按钮。
  

这样便实现了基础版的文字截断 + 可以自动显示隐藏按钮的交互。

接下来再看看文章开头提到的这个交互：

它和基础版的样式最大的不同就是它是多列的，这里可以使用 Grid 网格布局实现。

<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 容器，使得按钮显示时，文字所在标签可以进一步缩放