文字自适应布局，一行居中，两行居左，超过两行省略

努力奔跑的小孩

于 2022-10-27 17:35:26 发布

阅读量245

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_37224632/article/details/127550858

版权

一行居中，两行居左

<style>
  h2 {
    text-align: center;
  }
  p {
    display: inline-block;
    text-align: left;
  }
</style>
<h2>
  <p>我是单行我要居中</p>
  <p>我是多行我要居左我是多行我要居左我是多行我要居左</p>
</h2>

在这里插入图片描述
一行居中，两行居左，超过两行省略

<style>
  body {
    width: 375px;
  }
  h2 {
    text-align: center;
  }
  p {
    display: inline-block;
    text-align: left;
  }
  span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
<h2>
  <p><span>我是单行我要居中</span></p>
  <p><span>我是多行我要居左我是多行我要居左我是多行我要居左我是多行我要居左我是多行我要居左我是多行我要居左</span></p>
</h2>