OTT 前端技术

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

1. 背景介绍

  为了满足产品、设计的无理需求，什么活都得干

• 示例

2. 代码详解

  <!-- 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;
  }