纵向展示的文字溢出如何通过 css 显示省略号？

Question

如下 demo, 纵向展示时，横向溢出省略的方案不适用，还有其他的 css 解决方案没？

overflow: hidden;
text-overflow: ellipsis;

Answer 1

可以用垂直排版解决

p {
  writing-mode: vertical-rl
}

https://codepen.io/xboxyan/pen/yLZaLQw

Answer 2

用一个容器来裁剪内容，然后再用线性渐变新建一个白色透明的遮罩，这样看起来文字被截断然后显示省略号的效果

.container {
  width: 20px; 自定义宽度 */
  height: 100px; /* 自定义显示的高度 */
  overflow: hidden;
  position: relative;
}

.container::after {
  content: "..."; /* 省略号 */
  font-size: 12px; /* 调整省略号大小 */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, white, transparent); /* 根据背景颜色来改 */
  pointer-events: none; 
}