css实现多余字体用省略号表示

第一种情况：单行文字超出固定宽度后，用省略号表示

<p class="single">单行文字超出规定宽度后，以省略号形式展示。单行文字超出规定宽度后，以省略号形式展示。</p>

.single{
    width:200px;    /* 定好宽度 */
    height:40px;    /* 高度根据需求要不要 */
    overflow:hidden;
    width-space:nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

第二种情况：多行文字超出固定宽度后，用省略号表示

<p class="double">多行文字超出规定宽度和高度后，以省略号形式展示。多行文字超出规定宽度和高度后，以省略号形式展示。多行文字超出规定宽度和高度后，以省略号形式展示。</p>

.double{
     width:200px;    /* 定好宽度 */
     height:40px;
     display:-webkit-box;
     -webkit-box-orient:vertical;
     -webkit-line-clamp:2;    /* 根据业务需求设置第几行显示省略号 */
     overflow:hidden;
}