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

文字截断是 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 必须是宽度固定、或者最大宽度固定的,以此确保容器不会因为子元素无止境的扩充。比如你可以设置容器的 widthmax-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 网格布局实现。

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 容器,使得按钮显示时,文字所在标签可以进一步缩放
相关推荐
软件小伟2 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾23 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧32 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm41 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter