css---前端如何用css代码写省略号，单行省略号，多行省略号？

最新推荐文章于 2024-06-21 17:23:34 发布

原创最新推荐文章于 2024-06-21 17:23:34 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #多行省略号 #css省略号 #sass函数

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的效果，并提供SCSS混合方法来简化重复样式代码。适用于前端开发者快速掌握文本截断技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、单行省略号

width:100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

可以在scss中把width变为变量：

@mixin overflow($width){
  width:$width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2、多行省略号

width:100px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
//代码设置了宽度100px的文本，超过四行省略号显示

可以设置宽度和行数变量的scss函数：

@mixin white($width:auto,$row:1){
  width:$width;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $row;
  -webkit-box-orient: vertical;
}