单行居中显示文字,多行居左显示,最多两行超过用省略号结尾

2019-12-14 09:42:52

阅读:308
分类:代码段
标签:css

单行居中显示文字,多行居左显示,最多两行超过用省略号结尾

  1. 背景介绍
  为了满足产品、设计的无理需求,什么活都得干
  1. 代码详解
  <!-- html机构 -->
  <div class="container">
    <h2><p><em>这是单行文本</em></p></h2>
    <h2><p><em>这是两行文本,不够再加点,再加点</em></p></h2>
    <h2><p><em>这是三行文本,不够再加点,再加点,再加点,再加点,再加点,再加点,再加点</em></p></h2>
  </div>
  <!-- css 解释-->
  <!-- 首先确保我们的容器有宽度,不然何时才能到第二行呢 -->
  .container{
    width:320px;
    padding:0 10px;
    margin:10px auto;
    background: #ddd;
  }
  <!-- 再者,h2里面的元素居中  -->
  h2{
    text-align: center;
    padding:10px 0;
  }
  <!--利用inline-block元素可以被父级text-align:center居中的特性,且宽度不设由内容决定-->
  .container p {
    display: inline-block;
    text-align: center;
  }
  <!-- 多行省略 -->
  h2 em {
    position: relative;
    font-style: normal;
    text-align: left;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

评论:

    X

    备案号 皖ICP备19021899号-1  技术支持 © 947968273@qq.com