【CSS系列】writing | 您所在的位置:网站首页 › ae怎么改变文字方向 › 【CSS系列】writing |
文章目录
一、引子二、writing-mode1.语法horizontal-tb(默认:水平方向,文字 从左到右,行 从上到下)vertical-rl(垂直方向,文字 从上到下,行 从右到左)vertical-lr(垂直方向,文字 从上到下,行 从左到右)sideways-rl (实验值)sideways-lr (实验值)
2.属性搭配(1)盒子垂直居中 —— `margin: auto 0;`(2)文本图片垂直居中 —— `text-align: center;`(3)首行缩进 变 文字下沉 —— `text-indent`(4)其他
3.前世今生
三、拓展学习direction
⭐️ 好书推荐《Node.js从基础到项目实践(视频教学版)》
文档:writing-mode - CSS:层叠样式表 | MDN
一、引子
项目中有需求需要文字垂直排布,第一时间想到了 CSS 中的 direction 这个属性,但这个属性只能设置文字“从左到右“或从右到左,经过查找才发现有个”生僻属性“ —— writing-mode 如下即可实现: writing-mode: vertical-lr; 二、writing-modewriting-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。 1.语法 /* 关键字值 */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* 全局值 */ writing-mode: inherit; writing-mode: initial; writing-mode: revert; writing-mode: revert-layer; writing-mode: unset; horizontal-tb(默认:水平方向,文字 从左到右,行 从上到下)对于左对齐(ltr)文本,内容从左到右水平流动。对于右对齐(rtl)文本,内容从右到左水平流动。下一水平行位于上一行下方。 vertical-rl(垂直方向,文字 从上到下,行 从右到左)对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行左侧。对于右对齐(rtl)文本,内容从下到上垂直流动,下一垂直行位于上一行右侧。 vertical-lr(垂直方向,文字 从上到下,行 从左到右)对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行右侧。对于右对齐(rtl)文本,内容从下到上垂直流动,下一垂直行位于上一行左侧。 sideways-rl (实验值)对于左对齐(ltr)文本,内容从下到上垂直流动。对于右对齐(rtl)文本,内容从上到下垂直流动。所有字形(即使是垂直文本中的字形)都朝向右侧。 sideways-lr (实验值)对于左对齐(ltr)文本,内容从上到下垂直流动。对于右对齐(rtl)文本,内容从下到上垂直流动。所有字形(即使是垂直文本中的字形)都朝向左侧。 2.属性搭配writing-mode 可以改变文本排布方向,那么一些与文字相关的属性也会有更多妙用: (1)盒子垂直居中 —— margin: auto 0; .container { width: 100%; height: 100%; background-color: #f00; writing-mode: vertical-lr; } .container .content { height: 100px; width: 200px; margin: auto 0; background-color: #0f0; }注意:定宽定高 (2)文本图片垂直居中 —— text-align: center; 我是一行文字程序边界 .container { width: 100%; height: 100%; background-color: #0fF; writing-mode: vertical-lr; text-align: center; }程序边界 原文地址:https://iseeu.blog.csdn.net/article/details/131709017 (3)首行缩进 变 文字下沉 —— text-indent 我是一行文字程序边界 .container { width: 100%; height: 100%; background-color: #0fF; writing-mode: vertical-lr; text-indent: 2rem; }绝妙应用 https://www.zhangxinxu.com/study/201604/writing-mode-text-indent-vertical-down.html 程序边界 原文地址:https://iseeu.blog.csdn.net/article/details/131709017 (4)其他更多玩法慢慢探索发现,未完待续。。。 3.前世今生writing-mode属性 最初只是ie中的属性,只有ie支持,现在在css3中谷歌,火狐也开始支持。 所以使用的时候就需要记住两套不同的语法,ie的私有属性和css3的规范属性 如果只需要兼容到ie8+就可以只使用css3的规范属性就可以了 三、拓展学习 direction文档:direction - CSS:层叠样式表 | MDN direction CSS 属性用于设置文本、表格列和水平溢出的方向。 改变CSS世界纵横规则的writing-mode属性 « 张鑫旭-鑫空间-鑫生活writing-mode属性 css古文写法 ⭐️ 好书推荐 《Node.js从基础到项目实践(视频教学版)》《Node.js从基础到项目实践(视频教学版)》以理论结合实践的形式,讲解了Node.js 基础、框架、进阶知识和项目实践。本书为视频教学版,每一章节都有相对应的视频讲解,通过视频讲解可快速切入主题,提高学习效率。 全书分为4 大部分,共13 章,分别是Node.js 基础入门、Node.js 框架、Node.js 进阶以及企业项目实践。其中,第1~3 章为Node.js 基础入门讲解,包括Node.js 核心模块、自定义模块、第三方模块;第4~7 章为Node.js 框架讲解,包括Express 流行框架、MySQL 数据库、在Express 框架中操作MySQL 数据库以及Express 框架身份验证;第8~12 章为Node.js 进阶讲解,包括Node.js 事件循环、Koa 框架、socket.io、网络爬虫、GraphQL 基础语法;第13 章为企业项目实践讲解,使用Express 框架和MySQL 数据库完成x闻管理系统API 的开发。 |
CopyRight 2018-2019 实验室设备网 版权所有 |