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

竖排不知道楼主的文档是改的文字方向还是按回车所产生的

文字方向：单击菜单“格式----文字方向”选择第一个

回车所产生的：删除后面的回车符，光标定位于第下一个字按backspace键（退格键）

1.用flexbox布局

2. flow: row wrap

3.在盒容器里定义writing-mode: vertical-rl就可以实现竖排

4然后设置字体为斜体就可以了

或者你可以用border-radius的属性去绘制一个文字

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

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

HTML中如何让文字竖排

发表评论

评论列表（0条）