css实现文字竖排效果

简介:

在当前大家都习惯于横向排列的文本,但是绝大多数朋友也是知道的,在古代中国的文本是竖向排列的,本章节通过代码实例介绍一下如何实现文本的竖向排列效果,这样的需求在实际应用中也是有的。

代码如下:

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" >
< meta name = "author" content = "http://www.softwhy.com/" />
< 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实现文字竖排效果




相关文章
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
|
2月前
|
前端开发
css文字环绕png图片
css文字环绕png图片
26 1
|
3月前
|
前端开发
css文字字体间距设置
css文字字体间距设置
22 0
|
3月前
|
前端开发
css实现溢出部分文字成为省略号
css实现溢出部分文字成为省略号
15 0
|
3月前
|
前端开发
【前端切图】CSS文字渐变和背景渐变
【前端切图】CSS文字渐变和背景渐变
25 0
|
前端开发
CSS文字排版
一、font-size   我来试一试:为第一段中的“胆小如鼠”设置字号为:20px,字体颜色为:red。 DOCTYPE HTML> 字号、颜色 body{font-family:Microsoft Yahei;font-size:12px;color:#666;} .stress{font-size:20px;color:red;} 勇气 三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。
1158 0
|
1月前
|
Web App开发 移动开发 JavaScript
分享88个HTML&CSS源码,总有一款适合您
分享88个HTML&CSS源码,总有一款适合您
25 1
|
1月前
|
移动开发 监控 JavaScript
分享77个HTML&CSS源码,总有一款适合您
分享77个HTML&CSS源码,总有一款适合您
24 1
|
4天前
|
前端开发 数据安全/隐私保护
从建站到拿站 -- HTML和CSS基础
从建站到拿站 -- HTML和CSS基础
7 0

相关产品

  • 云迁移中心