css 省略号显示

2022-11-03 68 阅读1分钟

单行文本显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出显示省略号

overflow: hidden;
display: -webkit-box;  
-webkit-box-orient: vertical;   
-webkit-line-clamp: 3;   
word-break: break-all;

实现省略号后显示更多文案（vue）

<div class="wrap">
    <div class="text" ref="text">
      <span class="more" v-if="showMore">更多</span>
      <div class="content" ref="content">
        {{ content }}
      </div>
    </div>
</div>

data() {
    return {
      showMore: false,
    };
},
mounted() {
    this.$nextTick(() => {
      this.showMore =
        this.$refs.content.scrollHeight > this.$refs.text.clientHeight;
    });
},

.wrap {
  display: flex;
  .text {
    overflow: hidden;
    max-height: 125px;
    color: #222222;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 16px;
    line-height: 25px;
    &::before {
      float: right;
      height: calc(100% - 25px);
      content: "";
    }
    .more {
      float: right;
      clear: both;
      color: #e41d1d;
      &::before {
        padding-right: 1rem;
        content: "...";
        color: #222222;
      }
    }
    .content {
      word-break: break-all;
    }
  }
}

注：max-height为显示行数*行高。主要思路是利用浮动和伪元素来实现。若是移动端由于适配问题，尽量不采用css显示多行省略号的样式，ios会出现兼容问题。由于手机尺寸的原因，最好行高、字体大小、最大高度用px。