css超出隐藏、不换行、省略号、overflow、hidden、white-space、nowrap、text-overflow、ellipsis

1、类

.demo { width: 200px; border: 1px solid #00f; margin: 30px auto; padding: 10px; } .hidden { /* 超出隐藏 */ overflow: hidden; /* 不换行 */ white-space: nowrap; } .ellipsis { /* 超出隐藏 */ overflow: hidden; /* 不换行 */ white-space: nowrap; /* 使用省略号 */ text-overflow: ellipsis; } .ellipsis_line { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; /* 超出3行隐藏，并使用省略号 */ -webkit-line-clamp: 3; text-overflow: ellipsis; } 

2、超出隐藏

overflow: hidden; white-space: nowrap; 

3、超出隐藏并使用省略号

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

4、规定超出行数

overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis;