uniapp 微信小程序上:CSS中如何让竖直显示的文本,超出两行显示省略号?

问题遇到的现象和发生背景

uniapp 微信小程序上:CSS中如何让竖直显示的文本,超出两行显示省略号?

用代码块功能插入代码,请勿粘贴截图

// 这个是文字竖直显示,单行超出显示省略号

height: 400rpx;
writing-mode: vertical-rl;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

我知道如何,超出两行显示省略号
但是这个属性 writing-mode: vertical-rl; 和 这个属性好像冲突了 display: -webkit-box;

我想要达到的结果

让文本竖直 的前提下,超出两行显示省略号

主要是微信小程序上
这个是下面的:清晨第一缕曙光 大佬写的

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
writing-mode: vertical-rl;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;

但是,在微信小程序上还是这个效果

img

img


    div {
      width: 60px;
      height: 80px;
      font-size: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      border: 1px solid black;
      writing-mode: vertical-rl;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre-wrap;
    }

css3省略号