css 单行 超出省略 拼接

CSS提供了一种类似于文本截取的功能，叫做超出省略。超出省略可以让超出元素大小范围的内容变得隐藏，只显示一部分内容，最后用省略号来代替隐藏的部分。这样的效果在对于一些限制空间大小的元素（如导航栏、卡片等）非常有用。

下面是一个例子，我们来看看如何在CSS中实现超出省略：

  .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
   }

代码中使用了三个CSS属性:

• overflow: hidden —— 隐藏超出元素大小范围的内容
• text-overflow: ellipsis —— 在隐藏的部分显示省略号
• white-space: nowrap —— 不允许文本换行

如果我们想要让多行文字都实现超出省略，那么这个方法就不适用了。不过我们可以借助拼接的方法来实现。以下是一个例子：

  .line-clamp-2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
     /* 显示的行数 */    -webkit-box-orient: vertical;
  }
    

在这个例子中，我们除了使用overflow和text-overflow之外，还添加了display、-webkit-line-clamp、-webkit-box-orient这些属性。-webkit-line-clamp属性是控制显示的行数，-webkit-box-orient属性则是设置文字的方向，这里我们设置为垂直方向。

以上就是CSS中使用单行超出省略和多行拼接的方法，这些方法可以应用于很多场合，为我们的网页设计提供了更多的可能性。

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