HTML中如何让文字竖排

答案:1 悬赏:0 手机版

解决时间 2021-11-28 05:29

提问者网友：黑米和小志
2021-11-27 13:50

HTML中如何让文字竖排

最佳答案

五星知识达人网友：北城痞子
2021-11-27 14:58

兼容谷歌、火狐等浏览器（测试以后IE暂不兼容）:

    言成科技-文字竖排实例

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


    提供高品质教育服务让每个人遇到更好的自己
    提供高品质教育服务让每个人遇到更好的自己
    提供高品质教育服务让每个人遇到更好的自己
    提供高品质教育服务让每个人遇到更好的自己
    提供高品质教育服务让每个人遇到更好的自己

Tips：经过测试，vertical-rl、vertical-lr兼容谷歌火狐等浏览器，lr-tb只兼容ie7及以下浏览器，tb-rl、tb-lr只兼容IE8及以上浏览器。
2.设置CSS样式，固定宽度
对当前元素设置固定宽度，当文字一行容纳不下两个字时，文字自动换行，就形成了文字竖排。
代码实例：

    言成科技-文字竖排实例

        .box {
            width: 20px;
            line-height: 18px;
        }


    提供高品质教育服务让每个人遇到更好的自己

3.添加HTML的br标签
利用br标签换行的属性，实现文字竖排需求。
代码实例：

言成科技-文字竖排实例

提
供
高
品
质
教
育
服
务
让
每
个
人
遇
到
更
好
的
自
己

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

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！