0
点赞
收藏
分享

微信扫一扫

2.部署kubernetes的组件

三千筱夜 2023-08-08 阅读 47
css前端

对于单行文本裁剪:

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

对于多行文本裁剪:

  1. 在文本容器上定义 CSS Flexbox 属性 display: -webkit-box;

  2. 定义要显示的文本行数 -webkit-line-clamp: 4;

  3. 添加 -webkit-box-orient: vertical;

  4. 使用 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;
}

方法二:

两者可以结合使用,在只有单行文本时,使用方法一;在多行文本时,使用方法二。条件判断就是通过传的参数大小:

/** 这里的 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();
}
举报

相关推荐

0 条评论