css 实现多行省略，一行垂直居中（不支持ie）

NOyesNONO_

于 2022-06-21 16:12:12 发布

阅读量338

点赞数

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/NOyesNONO_/article/details/125392986

版权

前端专栏收录该内容

54 篇文章

订阅专栏

这段代码展示了如何使用Flexbox实现行内元素居中对齐，并限制元素内的文本显示行数。`.row`定义了一个Flex容器，`.item`类的元素通过`-webkit-line-clamp`属性限制了文本显示为两行，超出部分被隐藏。请注意，这个解决方案不适用于IE浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

     .row {
    		height: 40px;
            display: flex;
            align-items: center;
        }

        .item {
            width: 200px;
            display: -webkit-box;
            -webkit-line-clamp: 2;//行数
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: center;
        }

    <div class="row">
        <span class="item">一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十</span>
        <span class="item">一二三四五六七八九十</span>
        <span class="item">一二三四五六七八九十一二三四五六</span>
    </div>

不支持ie