css3 显示两行文字

在 CSS3 中，有一种非常有用的属性叫做text-overflow，它可以帮助我们显示两行文字。

/* 设置容器高度和宽度 */.container{
    width: 200px;
    height: 60px;
    overflow: hidden;
}
/* 设置文本样式 */.text{
    white-space: nowrap;
     /* 禁止文字换行 */overflow: hidden;
     /* 隐藏溢出的文本 */text-overflow: ellipsis;
     /* 在结尾处显示省略号 */display: -webkit-box;
     /* 使用webkit引擎 */-webkit-line-clamp: 2;
     /* 显示两行 */-webkit-box-orient: vertical;
 /* 垂直排列文本 */}
    

上面的代码演示了如何在一个容器中显示两行文字，当文本溢出容器时，使用省略号代替多余的文本。其中，whitespace属性禁止文字换行，overflow属性隐藏溢出的文本，text-overflow属性在结尾处显示省略号。

对于要显示多行文字的容器，我们需要使用-webkit-box属性和-webkit-line-clamp属性来显示指定的行数，并使用-webkit-box-orient属性来设置文本的垂直排列方式。

总之，利用text-overflow属性和-webkit-box属性，我们可以轻松地实现在一个容器中显示两行文字的效果。

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