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不透明度实例讲解
Apr 26 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 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
浅析php与数据库代码开发规范
2013/08/08 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php实现的xml操作类
2016/01/15 PHP
自制PHP框架之设计模式
2017/05/07 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
python使用append合并两个数组的方法
2015/04/28 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
Python中偏函数用法示例
2018/06/07 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
薇姿法国官网:Vichy法国
2021/01/28 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
数控机械专业个人的自我评价
2014/01/02 职场文书
机房搬迁方案
2014/05/01 职场文书
师范生自荐信模板
2014/05/28 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
单身申明具结书
2015/02/26 职场文书
退休欢送会致辞
2015/07/31 职场文书