CSS文本裁剪-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS文本裁剪。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

对于单行文本裁剪：

span {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    display:block;
}

对于多行文本裁剪：

在文本容器上定义 CSS Flexbox 属性 display: -webkit-box;
定义要显示的文本行数 -webkit-line-clamp: 4;
添加 -webkit-box-orient: vertical;
使用 overflow: hidden; 属性

p {   
   display: -webkit-box;   
   -webkit-line-clamp: 4;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

在使用时有两种方法：

方法一：

// HTML 部分
<span v-if="text.length <= 1" class="single-line-text">
  {{ text }}
</span>

<p v-else class="multi-line-text">
  {{ text }}
</p>


/** CSS 部分 **/
.single-line-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

.multi-line-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

方法二：

两者可以结合使用，在只有单行文本时，使用方法一；在多行文本时，使用方法二。条件判断就是通过传的参数大小：文章来源地址https://www.toymoban.com/news/detail-633075.html

/** 这里的 linesNum 就是我文本的行数 **/
@mixin trim($linesNum: null){
   @if $linesNum!== null {
      display: -webkit-box;
      -webkit-line-clamp: $linesNum;
      -webkit-box-orient: vertical; 
      overflow: hidden;
   }
   @else{
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      display: block;
   }
}

在调用时，进行传参：

p {
  // 调用 mixin，并传递参数---行数4
  @include trim(4);
}

span {
  // 调用 mixin，不传递参数
  @include trim();
}

到了这里，关于CSS文本裁剪的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

CSS文本裁剪

对于单行文本裁剪：

对于多行文本裁剪：

在使用时有两种方法：

方法一：

方法二：

在调用时，进行传参：

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2