纯css3 实现多行显示隐藏和文本垂直居中

最新推荐文章于 2025-05-27 23:18:44 发布

花生地瓜

最新推荐文章于 2025-05-27 23:18:44 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/u013018357/article/details/77483293

本文详细介绍了如何仅使用CSS3实现多行文本的显示与隐藏功能，并探讨了如何确保文本在容器内垂直居中的方法，对于前端开发者优化网页布局具有实用价值。

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

 <div class="clear test-div">
          <section class="fl test-sc">1</section>
          <section class="fl test-sc test-sc2">
            <p class="text-p">谁怕，一蓑烟雨任平生哈哈哈哈</p>
          </section>
          <section class="fl test-sc">5</section>
</div>

css代码:

.clear {
    clear: both;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.test-div .test-sc{
    margin: 2px;
    width: 100px;
    height: 100px;
    border: 1px solid yellowgreen;
}
.test-sc2{
    align-items:center;
    display: flex;
    display: -webkit-flex;
    justify-content:center; 
}
.text-p{
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;
    overflow: hidden; 
}