css - 旋转后设计错误

Question

我将 css 添加到 div

.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 . . .

我想不出其他办法。