HTML中如何让文字竖排_随笔

设置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>

<title>言成科技-文字竖排实例</title>

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

<title>言成科技-文字竖排实例</title>

.box {

width: 20px

line-height: 18px

}

</style>

</head>

<body>

<div class="box">提供高品质教育服务让每个人遇到更好的自己</div>

</body>

</html>

3.添加HTML的br标签

利用br标签换行的属性，实现文字竖排需求。

代码实例：

<!DOCTYPE html>

<head>

<title>言成科技-文字竖排实例</title>

</head>

<body>

</body>

</html>

了解更多文字处理方式：《jQuery特效实战开发》

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中，输入html代码：

3、浏览器运行index.html页面，此时成功实现了table表的列竖向排列。

三个办法：

一、在每个input样式中加上 style="display:block"

</div>

二、把div的宽度尽量改小，小于两个input相加的宽度即可

</div>

三、在每个input后面加上 <br>

</div>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6096730.html

HTML中如何让文字竖排

发表评论

评论列表（0条）