不确定行数文本上下左右居中并且超出省略号代替

最新推荐文章于 2025-06-04 19:10:40 发布

撅腚的duck

最新推荐文章于 2025-06-04 19:10:40 发布

阅读量225

点赞数 1

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/weixin_57157114/article/details/120196937

版权

这篇博客介绍了如何使用CSS样式实现动态获取数据时文本的居中显示，并在超出预设行数后使用省略号进行隐藏。通过设置`-webkit-line-clamp`和`-webkit-box-orient`属性，可以限制文本显示的行数，结合`overflow`和`text-overflow`属性，可以实现超出部分以省略号代替。同时，为了确保样式生效，需要为文本添加一个父级元素，并设置相应的布局属性。

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

动态获取数据的时候不确定文本行数并且要求文本居中和超出的用省略号来代替

.son{
   overflow: hidden;//超出隐藏
   text-overflow: ellipsis;//溢出用省略号显示
   display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。
   // 控制行数
   -webkit-line-clamp: 2;//超出两行隐藏
   -webkit-box-orient: vertical; // 从上到下垂直排列子元素
   //（设置伸缩盒子的子元素排列方式）
   text-align: center;//文本居中
   }

如果只设置子盒子的样式话代码经过编译后就把-webkit-box-orient: vertical干掉了所以我们这边采用了给他加一个父盒子的办法

首先先给将获取到数据给个父盒子，给父盒子设置 **display: -webkit-box;**属性，然后给父盒子设置 **-webkit-box-align: center，-webkit-box-pack: center;**将不确定宽高的子盒子上下左右居中,子盒子不给宽高，让内容撑出来子盒子的高度，这样子盒子就成为一个不确定宽高的盒子了

.paren{
  width: 178px;
  height: 82px;
  display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。
  -webkit-box-align: center;//左右居中
  -webkit-box-pack: center;//垂直居中
  .son{
      overflow: hidden;//超出隐藏
      text-overflow: ellipsis;//溢出用省略号显示
      display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。
      // 控制行数
      -webkit-line-clamp: 2;//超出两行隐藏
      -webkit-box-orient: vertical; // 从上到下垂直排列子元素
      //（设置伸缩盒子的子元素排列方式）
      text-align: center;//文本居中
      }
}