css3 超过一行省略号

CSS3中，我们可以通过text-overflow属性来控制超出一行的文本省略号的显示方式。

/* * 可选参数： * text-overflow: clip;
     // 超出部分被裁剪 * text-overflow: ellipsis;
     // 超出部分显示省略号 * text-overflow: fade;
 // 超出部分逐渐透明 */.box {
    white-space: nowrap;
     // 设置文本不换行overflow: hidden;
     // 超出部分隐藏text-overflow: ellipsis;
 // 超出部分显示省略号}

需要注意的是，text-overflow只能应用于设置了固定宽度的块级元素中，并且该元素的overflow属性必须设置为hidden或scroll。

另外，如果要兼容各种浏览器，还需要加上以下两行代码：

.box {
    display: -webkit-box;
     // 兼容webkit内核浏览器-webkit-box-orient: vertical;
     // 设置为垂直方向-webkit-line-clamp: 2;
 // 显示两行文本}
    

这样设置后，如果文本超过两行，就会在第二行显示省略号。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！