vue css 文字超出末尾加省略号...多行溢出

xi邮lj

已于 2022-08-05 09:58:18 修改

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue 省略号隐藏文字末尾 css文字超出末尾加省略号

于 2021-04-22 11:08:04 首次发布

本文链接：https://blog.csdn.net/lj121829/article/details/116004734

版权

19 篇文章 2 订阅

订阅专栏

本文介绍了如何使用CSS实现文本超出隐藏并添加省略号的效果，包括单行和多行显示。当遇到Flex布局或需要显示多行时，可以使用`-webkit-line-clamp`属性限制显示的行数，结合其他CSS属性实现优雅的文本截断。注意，这些技巧通常需要配合`overflow`和`display`属性使用。

摘要由CSDN通过智能技术生成

// 一般写好盒子的宽度后，就可以使用下面样式
// 超出隐藏
// 末尾加省略号
// 不换行
// 行内元素转换行内块元素。（CSS2.1 新增的值）

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;

但是

1 遇到flex布局，宽度不够的话，会与上面属性有冲突；

2 或者需要多加几行显示；

所以可以换一种

  overflow: hidden;
// 下面是显示几行写数字几就行
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;

-webkit-line-clamp CSS 属性可以把块容器中的内容限制为指定的行数.

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果

在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

关注

专栏目录