—– START —–

单行居中实现很简单,多行居左也很简单,多行省略也就是几行代码的事情
css 实现单行居中,多行居左省略

看HTML

css 实现单行居中,多行居左省略

最基本的HTMl架构,容器是div,

css 实现单行居中,多行居左省略

代码很简单,这个代码可以实现单行居中,也可以实现多行居左
为什么?
利用 inline-block 元素可以被父级 text-align:center 居中的特性,这样就可以实现单行居中,多行居左

下面是多行文本超出的省略,这个也简单,借用css3中的box的 orient 和 line-clamp这两个属性,
css 实现单行居中,多行居左省略
代码这样写,会使得多行文本溢出省略,不过单行状态下,仍然居左,不是单行居中效果
为什么?
css代码中,两个display的属性会重复执行

怎么办?

解决办法是更改HTML结构:

css 实现单行居中,多行居左省略

在span外增加标签,

css 实现单行居中,多行居左省略

在em上实现inline-block的特性,在span中实现多行文本溢出效果,一举两得

—– FINISH —–

相关文章:

  • 2021-12-05
  • 2021-10-07
  • 2022-12-23
  • 2021-11-04
  • 2021-10-17
  • 2021-12-25
  • 2022-01-17
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-01-01
  • 2021-09-19
  • 2021-11-19
  • 2021-09-23
相关资源
相似解决方案