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样式linear-gradient的使用实例
Jan 16 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 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扩展ZF――Validate扩展
2008/01/10 PHP
PHP 采集心得技巧
2009/05/15 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
10款实用的PHP开源工具
2015/10/23 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
vue实现扫码功能
2020/01/17 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
Python selenium文件上传方法汇总
2020/11/19 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python自定义线程类简单示例
2018/03/23 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
基于python实现坦克大战游戏
2020/10/27 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
会计学专业求职信
2014/07/17 职场文书
2014年人事科工作总结
2014/11/19 职场文书
年度考核个人总结
2015/03/06 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python