美文网首页
css字体样式:两排省略号,一排垂直居中

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

作者: 周郭郭先生 | 来源:发表于2019-07-22 12:31 被阅读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;

                }

              }

            }

    效果

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/hlwilctx.html