给定宽度（即块级元素）的标签，内容过多时会自动换行显示
内容过多时自动换行
怎样才能单行显示呢？
在标签上添加以下代码即可解决：
white-space: nowrap;
没有换行，但是给定宽度的文字超长后溢出
单行文本中，给定宽度的文字超长后会溢出
在标签上添加以下代码即可解决：
overflow: hidden;
text-overflow: ellipsis;
此时，需要显示单行内容的标签中超出的文字就会显示成 “...” 了。
单行文字超长后显示成 ...
弊端：只能显示单行文字。
#思考：如果需求是显示多行文字呢？文字过多怎么办？
在标签上添加以下代码即可解决：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*下面三条缺一不可 可以生成 '...' 主要针对谷歌浏览器 */
-webkit-line-clamp: 2;//表示行数
-webkit-box-orient: vertical;//表示纵向
此时，指定行数后的多余文字就替换成“...” 了。
第二行文字后都替换成 ... 了 ؏؏☝ᖗ乛◡乛ᖘ☝؏؏
网友评论