文字溢出处理之---------单行字体溢出显示省略号，多行字体溢出显示省略号

最新推荐文章于 2024-03-12 13:07:22 发布

爱倒腾

最新推荐文章于 2024-03-12 13:07:22 发布

阅读量365

点赞数

分类专栏：项目开发的爬坑记录合集 css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44514665/article/details/104009069

版权

项目开发的爬坑记录合集同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

场景：

在实际的项目开发个过程中，有时候文本内容不能全部显示出来，会影响到页面的排版布局，这时就需要我们对文字做一个溢出处理。

效果如下：

示例效果图

代码如下：

/* 单行文字溢出显示省略号 */
.ellipsis_one{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 两行文字溢出显示省略号 */
.wrap_more_two{
    overflow: hidden;
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /*! autoprefixer: on */
    -webkit-line-clamp: 2;
}

/* 三行文字溢出显示省略号 */
.wrap_more_three{
    overflow: hidden;
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /*! autoprefixer: on */
    -webkit-line-clamp: 3;
}

示例页面 HTML：

<body>
    <ul>
        <li><h4>单行文字溢出处理</h4>
            <p class="ellipsis_one">今天天气很好呀，而且马上就要过年啦，开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
        </li>
        <li><h4>多行文字溢出处理之 两行文字溢出</h4>
            <p class="wrap_more_two">今天天气很好呀，而且马上就要过年啦，开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></li>
        <li><h4>多行文字溢出处理之 三行文字溢出</h4>
            <p class="wrap_more_three">今天天气很好呀，而且马上就要过年啦，开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></li>
    </ul>
</body>

以上就可以满足现今项目中的全部需求，希望可以帮到你。