前端页面：当一行超过指定宽度时，多余的文字使用...

单行：width:90%;

css：样式

width:98%;
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

即可实现：

当文字超过两行时多余的文字使用...

width:30%;
             /*word-wrap:break-word与word-break:break-all
             共同点:把长单词强行断句，
             不同点:word-wrap:break-word是起新行来放置长单词，但是如果 新的行也放不下这个长单词还是会对长单词进行强制断句；
             而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了*/
            word-wrap: break-word;
            /* word-break:break-all;*/
             display:-webkit-box;
             -webkit-line-clamp:2;
             -webkit-box-orient:vertical;
             overflow:hidden;

其中word-wrap与word-break的区别：

word-wrap：结果图：

word-break：结果图：

 

  height:36px;//高度不能乱写，你要自己去看你的两行文字占多少高度
                  line-height: 18px;
                  font-size:14px;
                  overflow:hidden;//一定要写
                  -ms-text-overflow: ellipsis;
                  text-overflow: ellipsis;//超出省略号
                  display:-webkit-box;//一定要写
                  -webkit-line-clamp: 2;//控制行数
                  -webkit-box-orient: vertical;//一定要写