单行文字超出显示省略号

.text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

3行文字超出显示省略号

.text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;/*省略几行写几*/
    -webkit-box-orient: vertical;
}

鼠标悬浮显示全部

<!-- 给元素设置title属性 -->
<p title="文本内容">文本内容</p>