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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_27449993/article/details/78059010

单行:width:90%;

css:样式

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:结果图:



没有更多推荐了,返回首页