CSS 实现纵向文字溢出省略号的方法

在网页设计中，我们经常会遇到文字内容超出容器范围的情况。对于横向文字溢出，我们可以很容易地使用CSS的 text-overflow: ellipsis 属性来实现省略号效果。但当文字是纵向排列时，实现同样的效果就需要一些额外的技巧了。本文将介绍几种CSS实现纵向文字溢出省略号的方法。

方法一：使用 writing-mode 和 text-overflow 结合

writing-mode 属性可以改变文本的书写方向。我们可以将其设置为 vertical-rl 或 vertical-lr 来实现纵向排列文字。然后，结合 text-overflow: ellipsis 和 overflow: hidden 来实现溢出省略号效果。示例代码如下：

.vertical-text {
  writing-mode: vertical-rl;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100px; /* 设置容器高度 */
}

方法二：利用 webkit-line-clamp 属性（仅适用于WebKit内核浏览器）

webkit-line-clamp 属性可以限制文本显示的行数，并在超出时显示省略号。对于纵向文字，我们可以通过改变 writing-mode 并设置 webkit-line-clamp 来实现类似效果。示例代码如下：

.vertical-text {
  writing-mode: vertical-rl;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示3行 */
  overflow: hidden;
}

方法三：JavaScript配合CSS实现

如果需要在所有浏览器中都实现较好的兼容性，我们可以结合JavaScript来检测文字是否溢出容器，并动态添加省略号。通过CSS设置纵向文字的样式和容器高度，然后使用JavaScript获取文字高度和容器高度进行比较，如果文字高度大于容器高度，则截取一定长度的文字并添加省略号。

在实际应用中，我们可以根据具体需求和浏览器兼容性选择合适的方法来实现纵向文字溢出省略号效果，从而提升网页的用户体验。