css 文本溢出处理（单行文本显示 ... 多行文本显示指定行数，且可展开）

最新推荐文章于 2024-06-05 09:45:20 发布

w-somebody

最新推荐文章于 2024-06-05 09:45:20 发布

阅读量912

点赞数 1

分类专栏： # 样式（css等）文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_37600506/article/details/122111849

版权

样式（css等）专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、单行文本溢出，显示 …

<template>
    <div class="text-div">{{ value }}</div>
</template>

<script>
export default{
    data(){
        return {
            value: '单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本',
        }
    }
}
</script>

<style lang="scss" scoped>
  .text-div{
    width: 300px;
    height: 16px;
    margin: 20px 0;

    /*单行文本溢出*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }
</style>

结果显示如下：
在这里插入图片描述

2、多行文本溢出，显示指定行数 + …

<template>
    <div class="text-div">
      <span class="content-box">{{value}}</span>
    </div>
</template>

<script>
export default{
    data(){
        return {
            value: `
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
            `
        }
    }
}
</script>

<style lang="scss" scoped>
  .text-div{
    width: 300px;
    margin: 20px 0;
    position: relative;

    /*多行文本溢出*/
    .content-box{
        display: -webkit-box;
        display: -moz-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3
    }
  }
</style>

结果显示如下：
在这里插入图片描述

3、多行文本溢出，显示指定行数 + …+展开、收起按钮

<template>
    <div class="text-div">
      <span class="content-box" :style="contentStyle">{{value}}</span>
      <span class="btn-box" @click="toggleClass">
        {{btnName}}
        <i :class="btnName === '展开' ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
      </span>
    </div>
</template>

<script>
export default{
    data(){
        return {
            value: `
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
                多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
            `,
            btnName: '展开', //按钮文字：展开、收起
        }
    },
    computed: {
      contentStyle(){
        return {
          '-webkit-line-clamp': this.btnName==='展开' ? 3 : 100000
        }
      }
    },
    methods: {
        // 点击 展开或收起 按钮事件
        toggleClass(){
            this.btnName = this.btnName === '展开' ? '收起' : '展开'
        },
    }
}
</script>

<style lang="scss" scoped>
  .text-div{
    width: 300px;
    margin: 20px 0;
    position: relative;

    /*多行文本溢出*/
    .content-box{
      display: -webkit-box;
      display: -moz-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
    }

     /*展开、收起按钮样式*/
    .btn-box{
      position: absolute;
      bottom: 0;
      right: -45px;
      cursor: pointer;
      color: #1482f0;
    }
  }
</style>

结果显示如下：
在这里插入图片描述

w-somebody

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css 文本溢出处理（单行文本显示 ... 多行文本显示指定行数，且可展开）

目录1、单行文本溢出，显示 ...2、多行文本溢出，显示指定行数 + ...1、单行文本溢出，显示 …<template> <div class="text-div">{{ value }}</div></template><script>export default{ data(){ return { value: '单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行
复制链接

扫一扫