css 一行、多行文本隐藏，显示省略符

基础知识

案例用到知识省略图

overflow: 超出模块如何处理；主要有多种格式：

visible:显示。

hidden:隐藏。

scroll:滚动显示（注意：一定会显示滚动条）。

auto:自动显示（注意：达到条件就显示滚动条，没达到就不现实滚动条）。

white-space:空白空间；主要有pre,pre-line，nowrap,wrap四种类型。

pre:保留回车、空格符号。

pre-line:只保留回车，不保留空格。

nowrap:不换行。

wrap:换行。

-webkit-box：弹性盒子展示，不支持ie浏览器，只支持谷歌内核的浏览器。

-webkit-box-orient：子元素排列方式。一共有horizontal 横向排序;   vertical 纵向排序; inherit 继承父元素排序方式三种类型。

-webkit-line-clamp：显示多少行的内容。

应用场景

单行：设置宽度，自动隐藏。具体看代码：

.texts1 {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid;
    }

多行1：弹性盒子展示。具体看代码：

.texts2 {
      width: 200px;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //设置排列方式为 弹性盒子排列方式
      -webkit-box-orient: vertical; //子元素排列方式  horizontal 横向排序;   vertical 纵向排序; inherit 继承父元素排序方式
      -webkit-line-clamp: 2; //显示多少行的内容

      border: 1px solid;
    }

多行2：设置高度和行高，高度=行高*行数；如40px  = 20px * 2。然后after模拟省略符。具体看代码：

.texts3 {
      width: 200px;
      position: relative;//设置相对定位
      line-height: 20px;//设置行高
      height: 40px;//根据行高，设置行数，2行，就是 line-height * 2 = 40px
      padding-right: 10px;//预留空间显示 省略符
      overflow: hidden;
      border: 1px solid;

    }

    .texts3::after {
      content: "...";//模拟省略符
      position: absolute;//绝对定位
      bottom: 0;//定位在底部
      right: 0px;//定位在右边
      z-index: 10;//显示层级
    }

代码实施

<template>
  <div class="content">
    <div class="contentBox bg1">
      <p class="title1">单行溢出</p>
      <div class="texts1">金钱是善物；工作是自己的；金钱可以让生活更幸福；虽然钱不是万能的，但没有钱是万万不能的；</div>
    </div>
    <div class="contentBox bg2">
      <p class="title2">多行溢出1</p>
      <div class="texts2">金钱是善物；工作是自己的；金钱可以让生活更幸福；虽然钱不是万能的，但没有钱是万万不能的；</div>
      <div>注意：该方式不支持ie内核，只支持谷歌内核</div>
    </div>
    <div class="contentBox bg3">
      <p class="title3">多行溢出2</p>
      <div class="texts3">金钱是善物；工作是自己的；金钱可以让生活更幸福；虽然钱不是万能的，但没有钱是万万不能的；</div>
    </div>
  </div>
</template>

<script setup>
</script>
<style scoped lang="less">
.content {
  .contentBox {
    border: 1px solid;
    margin: 0 auto;
    width: 200px;
    margin-bottom: 20px;

    //单行
    .title1 {
      width: 200px;
    }

    .texts1 {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid;
    }

    //多行1
    .title2 {
      width: 200px;
    }

    .texts2 {
      width: 200px;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //设置排列方式为 弹性盒子排列方式
      -webkit-box-orient: vertical; //子元素排列方式  horizontal 横向排序;   vertical 纵向排序; inherit 继承父元素排序方式
      -webkit-line-clamp: 2; //显示多少行的内容

      border: 1px solid;
    }

    .title3 {
      // width: 200px;
    }

    .texts3 {
      width: 200px;
      position: relative;//设置相对定位
      line-height: 20px;//设置行高
      height: 40px;//根据行高，设置行数，2行，就是 line-height * 2 = 40px
      padding-right: 10px;//预留空间显示 省略符
      overflow: hidden;
      border: 1px solid;

    }

    .texts3::after {
      content: "...";//模拟省略符
      position: absolute;//绝对定位
      bottom: 0;//定位在底部
      right: 0px;//定位在右边
      z-index: 10;//显示层级
    }

  }


}</style>

总结

在做了多年的开发之后，发现最容易忘的就是基础的知识；越基础越不常用代码，就越容易忘。所以还是需要偶尔复习一些。最后以一句禅语结束：常常勤拂拭，何处惹尘埃。