css

1.英文自动换行

<p>fjdlskjljdlkjskldjklsjdfklsjdfklsjdklfsjdklfjskdljflk</p>
word-wrap:break-word;//起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句
white-space:normal;
word-break:break-all;//不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句
width:100px;

 2.省略号

单行文本超过部分显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本超过部分显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;

使用vue,则可使用下面这种方式

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;

 

posted @ 2021-12-27 17:16  钱小柒  阅读(39)  评论(0)    收藏  举报