image.png
    image.png
    需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。且按钮在段落的后面

    • 首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。
    • 接下来主要是 css 上的思路，其实可以分为两部分，如下图，标号1的部分展示前面三行，标号为2的部分会根据1的行数判断缩进的大小，然后展示第四行。最后通过背景色的控制让两者看上去是一段文字。

    主要的点：
    第一部分：定位在文本框左上角，是三行高度直接截断
    第二部分：定位在文本框左上角，是4行高度写上省略号样式，右边空出五个字距离，然后整体缩进15个字，这样上面三行前面实际和第一部分重合，加上背景色与层级，会看的像一段文字

    1. {
    2.     padding-right: 5em;
    3.     text-intent: 15em;
    4. }

    第三部分：定位在右下角的展开全文的汉字，根据文本框里文本的真实高度是否大于4行来决定是否展示

    1. <template>
    2.     <div
    3.         class="text-box"
    4.         :class="isCusp ? 'text-cusp-box' : ''"
    5.     >
    6.         <div
    7.             class="text-desc"
    8.             :class="isOpen ? 'total-desc' : ''"
    9.             :title="title ? title+'：'+content : content"
    10.         >
    11.             <div class="text-con" ref="desc">
    12.                 <span
    13.                     class="text-title"
    14.                     v-if="title"
    15.                 >{{title}}：</span>{{content}}
    16.             </div>
    17.             <div
    18.                 class="text-opt"
    19.                 v-if="isBtn"
    20.                 @click="change"
    21.             >{{isOpen ? '收起全文' : '展开全文'}}</div>
    22.         </div>
    23.     </div>
    24. </template>
    26. <script>
    27.     export default {
    28.         props: {
    29.             // 文字标题
    30.             title: {
    31.                 type: String,
    32.                 default: ''
    33.             },
    34.             // 文字内容
    35.             content: {
    36.                 type: String,
    37.                 default: ''
    38.             },
    39.             // 是否有尖头指向
    40.             isCusp: {
    41.                 type: Boolean,
    42.                 default: false
    43.             }
    44.         },
    45.         data() {
    46.             return {
    47.                 // 内容信息
    48.                 info: '',
    49.                 // 是否展示按钮
    50.                 isBtn: false,
    51.                 // 按钮样子
    52.                 isOpen: true
    53.             };
    54.         },
    55.         methods: {
    56.             change() {
    57.                 this.isOpen = !this.isOpen;
    58.             }
    59.         },
    60.         mounted() {
    61.             this.info = this.content;
    62.         },
    63.         watch: {
    64.             info(val) {
    65.                 let descHeight = window
    66.                     .getComputedStyle(this.$refs.desc)
    67.                     .height.replace('px', '');
    68.                 let rem = window.getComputedStyle(this.$refs.desc).lineHeight.replace('px', '');
    69.                 // 超过了四行
    70.                 if (descHeight > rem * 4) {
    71.                     // 显示展开收起按钮
    72.                     this.isBtn = true;
    73.                     this.isOpen = false;
    74.                 } else {
    75.                     // 不显示展开收起按钮
    76.                     this.isBtn = false;
    77.                     this.isOpen = true;
    78.                 }
    79.             }
    80.         }
    81.     };
    82. </script>
    84. <style lang="less" scoped>
    85. .text-box {
    86.     background: #f3f6f9;
    87.     padding: 16px;
    88.     border-radius: 8px;
    89.     .text-desc {
    90.         position: relative;
    91.         max-height: 144px;
    92.         line-height: 36px;
    93.         word-wrap: break-word;
    94.         word-break: break-all;
    95.         overflow: hidden;
    96.         .text-con {
    97.             font-size: 24px;
    98.             color: #77808a;
    99.             line-height: 36px;
    100.             .text-title {
    101.                 font-weight: bold;
    102.             }
    103.         }
    104.         // 这是展开前实际显示的内容
    105.         &:after,
    106.         &:before {
    107.             content: attr(title);
    108.             position: absolute;
    109.             left: 0;
    110.             top: 0;
    111.             width: 100%;
    112.             font-size: 24px;
    113.             color: #77808a;
    114.             line-height: 36px;
    115.             background: #f3f6f9;
    116.         }
    117.         // 把最后最后一行自身的上面三行遮住
    118.         &:before {
    119.             display: block;
    120.             overflow: hidden;
    121.             z-index: 1;
    122.             max-height: 108px;
    123.         }
    124.         &:after {
    125.             display: -webkit-box;
    126.             -webkit-box-orient: vertical;
    127.             overflow: hidden;
    128.             height: 144px;
    129.             -webkit-line-clamp: 4;
    130.             text-overflow: ellipsis;
    131.             -webkit-box-sizing: border-box;
    132.             box-sizing: border-box;
    133.             text-indent: -15em;
    134.             padding-right: 5em;
    135.         }
    136.         &.total-desc{
    137.             max-height: none;
    138.         }
    139.         &.total-desc:before{display: none;}
    140.         &.total-desc:after{display: none;}
    141.     }
    142.     &.text-cusp-box {
    143.         position: relative;
    144.         margin-top: 30px;
    145.         &:before {
    146.             content: '';
    147.             height: 0px;
    148.             width: 0px;
    149.             position: absolute;
    150.             top: -14px;
    151.             left: 105px;
    152.             margin-left: -10px;
    153.             z-index: 1;
    154.             border-left: 14px solid transparent;
    155.             border-right: 14px solid transparent;
    156.             border-bottom: 24px solid #f3f6f9;
    157.         }
    158.     }
    159.     .text-opt {
    160.         position: absolute;
    161.         font-size: 24px;
    162.         color: #00c0eb;
    163.         line-height: 36px;
    164.         bottom: 0px;
    165.         right: 0;
    166.         z-index: 10;
    167.     }
    168. }
    169. </style>