在当前大家都习惯于横向排列的文本,但是绝大多数朋友也是知道的,在古代中国的文本是竖向排列的,本章节通过代码实例介绍一下如何实现文本的竖向排列效果,这样的需求在实际应用中也是有的。
代码如下:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
title
>蚂蚁部落</
title
>
<
style
type
=
"text/css"
>
#webfx{
position:absolute;
background:red;
top:50px;
right:100px;
width:100px;
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
webfx
>蚂蚁部落欢迎您</
div
>
</
body
>
</
html
>
|
原文发布时间为:2017-3-11
本文作者:admin
本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落
原文链接:css实现文字竖排效果