博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS文本方向
阅读量:5875 次
发布时间:2019-06-19

本文共 1667 字,大约阅读时间需要 5 分钟。

前面的话

  一般地,正常网页文本方向都是从上到下,从左到右。实际上,有多种设置文本方向的属性,前面已经详细介绍过text-align,HTML全局属性中有一个"dir"属性就是专门用来设置文本方向的,设置文本方向的CSS样式有direction、unicode-bidi和writing-mode。本文将详细介绍网页文本方向的设置方法

 

text-align

  水平对齐实现上影响的是一个元素中的文本的水平对齐方式,

  值: left | center | right | justify | inherit

  初始值: left

  应用于: 块级元素(包括block和inline-block)

  继承性: 有

//left: 1 23 456//right: 1 23 456

writing-mode

  writing-mode原先是IE的私有属性,原先的属性是lr-tb(左-右,上-下)和tb-rl(上-下,右-左)。其中writing-mode:tb-rl常用于触发haslayout。但W3C将writing-mode属性标准化后,其属性值也发生了变化

  writing-mode属性与其他改变文本方向的属性非常不一样。它不仅改变文本的显示方向,更直接改变了文本流的方向。如果其属性值改为vertical-rl,则文本流改成了垂直方向,则text-align变成了垂直对齐,vertical-align变成了水平对齐

  值: horizontal-tb | vertical-rl | vertical-lr

  初始值: horizontal-tb

  应用于: 除表格类元素之外的所有元素

  继承性: 有

  [注意]safari和移动端IOS和android需要添加-webkit-前缀;IE浏览器只支持自己的私有属性值

dir

  dir是HTML的全局属性,专门用来设置文本的方向

  值: ltr | rtl | auto

//ltr: 1 23 456//rtl: 456 23 1

direction

  direction是设置文本方向的CSS样式

  值: ltr | rtl | inherit

  初始值: ltr

  应用于: 所有元素

  继承性: 有

  [注意]想让direction样式在inline元素上起作用,需要unicode-bidi样式的相关设置

  [注意]设置direction样式时,HTML元素的全局属性dir无效

ltr: 从左到右(left to right)rtl: 从右到左(right to left)
//ltr: 1 23 456//rtl: 456 23 1

unicode-bidi

  unicode-bidi是一种更健壮的处理文本方向的方式

  值: normal | embed | bidi-override | isolate | isolate-override | plaintext | inherit

  初始值: normal

  应用于: 所有元素

  继承性: 无

  [注意]unicode-bidi属性应用于flex弹性盒模型上有问题,除非伸缩容器只包含一个匿名伸缩项目时有效,其余情况都无效

  [注意]isolate、isolate-override、plaintext是实验属性值,几乎没有浏览器支持

//display:inline-block/blocknormal/embed: 456 23 1bidi-override: 654 32 1//display:inlinenormal:1 23 456embed: 456 23 1bidi-override: 654 32 1

  [注意]只有当dir为rtl或direction为rtl时,unicode-bidi属性才起作用

转载于:https://www.cnblogs.com/xiaohuochai/p/5328818.html

你可能感兴趣的文章
CentOS 7 设置中文环境
查看>>
javascript中关于数组的一些鄙视题
查看>>
C#语法之特性
查看>>
C#中使用aria2c进行下载并显示进度条
查看>>
鞋业管理系统定期执行任务
查看>>
2016教师节微信祝福语大全
查看>>
【转】随机函数的rand、srand用法
查看>>
Nginx: could not build the server_names_hash 解决办法
查看>>
P4factory <Integration with Mininet>
查看>>
Ubuntu16.04下搭建Go语言环境
查看>>
.NetCore~Linux环境下部署
查看>>
eclipse调试(debug)的时候,出现Source not found,Edit Source Lookup Path,一闪而过
查看>>
Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放
查看>>
Kafka消息模拟器
查看>>
Linux常用基本命令(cat)
查看>>
HTML5 Canvas游戏开发实战
查看>>
转-玩转git,让git成为个人工作备份利器
查看>>
extjs4 系列文章
查看>>
nginx设置http代理
查看>>
【C011】Python - 基础教程学习(二)
查看>>