css字体样式:两排省略号,一排垂直居中

2019-07-22  本文已影响0人  周郭郭先生

html

<div class="center">

              <p><span>测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 </span></p>

</div>

css

.center {

          display: table;

          width: 442px;

          height: 74px;

          line-height: 74px;

          margin: 0 60px;

          p {

            width: 442px;

            line-height: 37px;

            display: inline-block;

            vertical-align: middle;

            font-weight: 600;

            span {

              display: -webkit-box;

              text-emphasis: center;

              text-overflow: -o-ellipsis-lastline;

              overflow: hidden;

              text-overflow: ellipsis;

              line-clamp: 2;

              font-size: 26px;

              -webkit-box-orient: vertical;

              -webkit-line-clamp: 2;

            }

          }

        }

效果

上一篇下一篇

猜你喜欢

热点阅读