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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
PHP 采集获取指定网址的内容
2010/01/05 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
js中的前绑定和后绑定详解
2013/08/01 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python实现逻辑回归的方法示例
2017/05/02 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Pytorch中.new()的作用详解
2020/02/18 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
毕业生就业自荐书
2013/12/15 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
ktv好的活动方案
2014/08/15 职场文书
质量整改报告范文
2014/11/08 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL