css - 旋转后得到错误的设计

Question

我给一个div添加了css

.rotate { 

height: 50px;
width: 50px;
padding: 1px;
font-family:Arial, Helvetica, sans-serif; font-size:12px;
    margin-top:45px;
    margin-bottom:10px;
  -webkit-transform: rotate(-90deg); /* safari/chrome */ 
  -moz-transform: rotate(-90deg); /* firefox 3.5+ */ 
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* ie5.5+ */ 
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */
  display:block; 
  text-overflow:ellipsis;
  overflow:hidden;

}

显示的 div 在每条垂直线上呈现 ...!

Answer 1

您的 CSS 指定将 ... 放在元素中放不下的一行文本之后:

text-overflow: ellipsis;

通过更改宽度和高度确保文本适合。

---

编辑

你想把 ... 放在所有垂直文本之后吗？我想你的意思是:

t t t
x x x
e e e
t t t
     
t t t
r r r
e e e
v v v ...

代替:

. . .
. . .
. . .
t t t
     
t t t
r r r
e e e
v v v

但我认为 CSS 不可能做到这一点。您放入元素中的文本应该是这样的:

vert text
vert text
vert text
.
. 
.

然后当你旋转它时，你会得到这个:

t t t
x x x
e e e
t t t
     
t t t
r r r
e e e
v v v . . .

我想不出别的办法。