Vertical Text Direction

2019-01-03 12:39发布

站内问答 / HTML/CSS
534 21 5

I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... Isn't there a way to have actual vertical direction text?

I only set the rotation to 305 degrees in the demo which doesn't make the text vertical. 270deg will but I only made the demo to show rotation.

21条回答
聊天终结者
2楼-- · 2019-01-03 13:26

This works as well:

transform: rotate(90deg);
查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
3楼-- · 2019-01-03 13:26

Best solution would be to use writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

It defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

It has good browser support, but will not work on IE8 (if you care about IE) http://caniuse.com/#feat=css-writing-mode

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
4楼-- · 2019-01-03 13:27 

<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
5楼-- · 2019-01-03 13:28 
-webkit-transform: rotate(90deg);

The other answers are correct but they led to some alignment problems. On trying out different things this CSS piece code worked perfectly for me. 

.vertical{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
}
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
6楼-- · 2019-01-03 13:29

To rotate text 90 degrees:

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Also, it appears that the span tag can't be rotated without being set to display:block.

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
7楼-- · 2019-01-03 13:32

Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css 

p { writing-mode: tb-rl; }
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)