淘先锋技术网

首页 1 2 3 4 5 6 7

CSS是一种非常有用的技能,可以帮助我们控制页面的样式。一个常见的需求就是在一些地方,当内容太长的时候,我们希望用省略号来代替超出部分。下面是一些CSS控制换行用省略号的技巧。

/* 单行省略 */
.single-line-ellipsis {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示为省略号 */
}
/* 多行省略 -webkit-line-clamp只在Chrome、Safari和iOS Safari中支持*/
.multi-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 显示几行 */
overflow: hidden;
text-overflow: ellipsis;
}
/* 兼容其他浏览器的多行省略 */
.multi-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 兼容行数不够的情况 */
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

以上代码中,“single-line-ellipsis”表示单行省略,“multi-line-ellipsis”表示多行省略,具体使用时可以根据需要选择相应的类名。在使用多行省略时,-webkit-line-clamp只在一些特定的浏览器中支持,为了保证兼容性,可以添加其他的语句,如word-break、-webkit-hyphens和-moz-hyphens等。

总之,掌握了CSS控制换行用省略号的技巧,我们就可以更好地控制页面的样式,让页面更加美观和优雅。