!DOCTYPE html html head meta charsetutf-8 title溢出显示点点点/title style typetext/css .dv{ width:300px; height:150px; padding: 10px; border: 1px solid #ccc; /* 强制不换行 */ white-space: nowrap; /* 文字的超出部分用省略号代替 */ text-overflow: ellipsis; /* 隐藏溢出内容 */ overflow: hidden; } /style /head body div classdv 这是一段超长的文字超长的文字 这是一段超长的文字真的超长超长超长 的。这是一段超长的文字超长的文字 这是一段超长的文字真的超长超长超 长的。 /div /body /html一段很长文字在页面缩放显示的时候会溢出很多时候都是设置为溢出显示点点点。如果一段文字想要设置两行显示超出部分点点点代码如下display: -webkit-box; word-break: break-all; text-overflow: ellipsis; overflow: hidden; white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
文字溢出显示省略号效果
!DOCTYPE html html head meta charsetutf-8 title溢出显示点点点/title style typetext/css .dv{ width:300px; height:150px; padding: 10px; border: 1px solid #ccc; /* 强制不换行 */ white-space: nowrap; /* 文字的超出部分用省略号代替 */ text-overflow: ellipsis; /* 隐藏溢出内容 */ overflow: hidden; } /style /head body div classdv 这是一段超长的文字超长的文字 这是一段超长的文字真的超长超长超长 的。这是一段超长的文字超长的文字 这是一段超长的文字真的超长超长超 长的。 /div /body /html一段很长文字在页面缩放显示的时候会溢出很多时候都是设置为溢出显示点点点。如果一段文字想要设置两行显示超出部分点点点代码如下display: -webkit-box; word-break: break-all; text-overflow: ellipsis; overflow: hidden; white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 2;