设置CSS样式，writing-mode属性
兼容谷歌、火狐等浏览器（测试以后IE暂不兼容）:
writing-mode:vertical-rl//垂直方向，从右到左
writing-mode:vertical-lr//垂直方向，从左到右
IE私有属性（其他浏览器不兼容）：
writing-mode:lr-tb//默认，从左到右，从上到下。
writing-mode:tb-rl//从上到下，从右到左。
writing-mode:tb-lr//水平方向，从上到下，从左到右。
代码实例：
<!DOCTYPE html><head>
<meta charset="UTF-8" />
<title>言成科技-文字竖排实例</title>
<style type="text/css">
.box1 { writing-mode: vertical-rl }
.box2 { writing-mode: vertical-lr }
.box3 { writing-mode: lr-tb }
.box4 { writing-mode: tb-rl }
.box5 { writing-mode: tb-lr }
</style>
</head>
<body>
<div class="box1">提供高品质教育服务让每个人遇到更好的自己</div>
<div class="box2">提供高品质教育服务让每个人遇到更好的自己</div>
<div class="box3">提供高品质教育服务让每个人遇到更好的自己</div>
<div class="box4">提供高品质教育服务让每个人遇到更好的自己</div>
<div class="box5">提供高品质教育服务让每个人遇到更好的自己</div>
</body>
</html>
Tips：经过测试，vertical-rl、vertical-lr兼容谷歌火狐等浏览器，lr-tb只兼容ie7及以下浏览器，tb-rl、tb-lr只兼容IE8及以上浏览器。
2.设置CSS样式，固定宽度
对当前元素设置固定宽度，当文字一行容纳不下两个字时，文字自动换行，就形成了文字竖排。
代码实例：
<!DOCTYPE html><head>
<meta charset="UTF-8" />
<title>言成科技-文字竖排实例</title>
<style type="text/css">
.box {
width: 20px
line-height: 18px
}
</style>
</head>
<body>
<div class="box">提供高品质教育服务 让每个人遇到更好的自己</div>
</body>
</html>
3.添加HTML的br标签
利用br标签换行的属性，实现文字竖排需求。
代码实例：
<!DOCTYPE html><head>
<meta charset="UTF-8" />
<title>言成科技-文字竖排实例</title>
</head>
<body>
<div class="box">提<br>供<br>高<br>品<br>质<br>教<br>育<br>服<br>务<br>让<br>每<br>个<br>人<br>遇<br>到<br>更<br>好<br>的<br>自<br>己</div>
</body>
</html>
了解更多文字处理方式：《jQuery特效实战开发》
做网页设置文字格式时，设置writing-mode:tb-rl可以让文字竖排，但是只是IE支持，火狐不支持。那么怎样让火狐浏览器显示竖排文字呢？方法是把每一列要显示的文字都用一个div包起来，并设置div的width属性为文字宽度的1.5倍（可以适当调整，但必须保证在1到2之间),最后视实现需要设置div的左浮动或右浮动。下面以一个例子来说明： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" /><title>念奴娇 赤壁怀古</title><style type="text/css">body { padding:30px 100px} div { float:right width:1.5em} div.title { font-size:xx-large font-weight:bold}</style></head> <body> <!-- 注意下面标题中间的那个点也必须用div包住，否则它不会竖着显示--> <div class="title">念奴娇<div>·</div>赤壁怀古</div> <div>苏轼</div> <div>大江东去</div> <div>浪淘尽</div> <div>千古风流人物</div> <div>故垒西边人道是</div> <div>三国周郎赤壁</div> <div>乱石穿空</div> <div>惊涛拍岸</div> <div>卷起千堆雪</div> <div>江山如画</div> <div>一时多少豪杰</div> <div>遥想公谨当年</div> <div>小乔初嫁了</div> <div>雄姿英发</div> <div>羽扇纶巾</div> <div>谈笑间</div> <div>强虏灰飞烟灭</div> <div>故国神游</div> <div>多情应笑我</div> <div>早生华发</div> <div>人生如梦</div> <div>一尊还酹江月</div></body></html>将class 放到<td>中，去掉<div>和</div>即可<html>
<head>
<title>HTML表格中竖排文字问题</title>
<style type="text/css">
<!--.tnt {Writing-mode:tb-rlText-align:leftfont-size:20pt}-->
</style>
</head>
<body>
<table border="1" width="300" height="600" style="color:red">
<tr height="300">
<td>
<div class="tnt">我爱中国</div>
</td>
</tr>
<tr>
<td class="tnt">
我爱中国
</td>
</tr>
</table>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）