CSS3实现文本垂直排列的方法


Posted in HTML / CSS onJuly 10, 2018

最近的一个项目中要使文字垂直排列,也就是运用了CSS的writing-mode属性。

writing-mode最初时ie中支持的一个属性,后来在CSS3中增添了这一新的属性,所以在ie中和其他浏览器中的语法会有区别。

1.0 CSS3标准

writing-mode:horizontal-tb;//默认:水平方向,从上到下 
writing-mode:vertical-rl;  //垂直方向,从右向左
writing-mode:vertical-lr;  //垂直方向,从左向右

demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS文字垂直排列</title>
        <style type="text/css">
            div{
                border: 1px solid lightblue;
                padding: 5px;
            }
            .vertical-text{
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
            }
        </style>
    </head>
    <body>
        <div class="vertical-text">
            1. 文字垂直排列 <br />
            2. 文字垂直排列
        </div>
    </body>
</html>

CSS3实现文本垂直排列的方法

2.0 IE中

由于历史的原因,IE下该属性值则显得尤为复杂:

-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

具体可以查看官方文档:

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/

3.0 一些应用

3.1 垂直居中

通过对这个属性的使用,我们可以结合 text-align:center 实现垂直居中或者使用margin: auto。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3 图片垂直居中</title>
        <style type="text/css">
            div{
                border: 1px solid lightblue;
                padding: 5px;
                height: 500px;
            }
            .vertical-img{
                -webkit-writing-mode: vertical-rl;
                -ms-writing-mode: bt-rl;
                writing-mode: vertical-rl;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="vertical-img">
             <img src="1.jpg"/>
        </div>
    </body>
</html>

CSS3实现文本垂直排列的方法

3.2 文字下沉效果

我们可以设置文字的writing-mode,然后在结合text-indent来实现文字点击时的下沉效果;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字下沉效果</title>
        <style type="text/css">
            .btn{
                width: 50px;
                height: 50px;
                line-height: 50px;
                color: white;
                text-align: center;
                font-size: 16px;;
                display: inline-block;
                border-radius: 50%;
                background: gray;
                cursor: pointer;
            }
            .btn:active{
                text-indent: 2px;
            }
            .vertical-text{
                 writing-mode: tb-rl;
                -webkit-writing-mode: vertical-rl;      
                writing-mode: vertical-rl;
                *writing-mode: tb-rl;
            }
        </style>
    </head>
    <body>
        <span>点击领红包</span>
        <p class="vertical-text btn">开 </p>
    </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 #HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 #HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 #HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 #HTML / CSS
CSS3实现可翻转的hover效果
May 23 #HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 #HTML / CSS
CSS3实现多样的边框效果
May 04 #HTML / CSS
You might like
Sony CFR 320 修复改造
2020/03/14 无线电
php 获取完整url地址
2008/12/20 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python安装以及IDE的配置教程
2015/04/29 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python获取Linux发行版名称
2019/08/30 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
党支部公开承诺书
2014/03/28 职场文书
出国留学经济担保书
2014/04/01 职场文书
工程承包协议书
2014/04/22 职场文书
三严三实对照检查材料
2014/09/22 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
python实现三次密码验证的示例
2021/04/29 Python