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特效实战开发》

1、打开VisualStudioCode，选择文件夹，点击新建文本选项。

2、给新建的文件对象重命名，文件名以.html结尾，此处文件命名为img.html。

3、在代码块中编写代码文件，先插入文字代码，在输入图片代码。

4、右击代码空白处，在d出的选项卡中选择OpenInDefaultBrowser选项。更改完成后，在界面中显示图片在右，文字靠左的效果。

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

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

HTML中如何让文字竖排

发表评论

评论列表（0条）