流向的改变

CSS 流向的改变

此部分内容更多的是对于 IE 做样式实现

改变水平流向的 direction

只要是内联元素,只要和书写相关,都可以使用 direction 属性

.directionLeftToRight {
    /* 默认值 */
    direction: ltr;
}
.directionRightToLeft {
    direction:rtl;
}

ltr 是初始值,表示 left-to-right ,从左往右

rtl 表示 right-to-left ,从右往左

目前东亚以及欧美文字的书写就是从左往右的;

阿拉伯语 (Arabic) 、希伯来语 (Hebrew) 等的书写就是从右往左的

direction 设计的本意就是为了兼顾这类语言

  • direction 还可以轻松改变表格中列的呈现顺序

  • direction:rtl 还可以让 text-justify 两端对齐元素,最后一行落单的元素右对齐显示

    在不支持 text-align:start/end 的浏览器中 (IE) ,不同的 direction 属性值会改变 text-align 属性的初始值:

    • direction 值为 ltr 的时候,text-align 的初始值是 left
    • direction 值为 rtl 的时候,text-align 的初始值是 right
切换两个按钮左右排列位置

需求:在桌面端,”确认“按钮在左边,”取消“按钮在右边;在移动端的排列则反过来。

确保两个按钮都属于内联元素,没有设置定位or块状元素

@media screen and (max-width: 480px) {
    .dialog-footer { direction: rtl; }
}
省略开头溢出文字

需求:为了当文本过长时,文末的 icon 不被隐藏,出现文本溢出时,让文本前面的内容被省略。

使用 direction 属性将原来的文末溢出省略切换成开头溢出省略

<p class="ell" dir="ltr">开头是我,这是中间,然后就是结束</p>
<p class="ell" dir="rtl">开头是我,这是中间,然后就是结束</p>
.ell {
    width: 14em;
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden; 
}

黄金搭档 unicode-bidi

unicode-bidi: noraml;	/* 默认 */
unicode-bidi: embed;
unicode-bidi: bidi-override;
  • normal:跟随外部的 direction
  • embed:保持原有的排列且不受外部 direction 影响
  • bidi-override:与外部的 directio 反向排列

能改变纵横规则的 writing-mode

  • CSS3 规则

    writing-mode: horizontal-tb;	/* 默认 */
    writing-mode: vertical-rl;
    writing-mode: vertical-lr;
    
    • horizontal-tb 表示文本流是水平方向的,元素是从上往下(top-bottom)堆叠的
    • vertical-rl 表示文本是垂直方向展示,阅读顺序是从右往左(right-left)。即古诗的阅读方向
    • vertical-lr 表示文本是垂直方向展示,阅读顺序是默认的从左往右(left-right)。即仅仅是水平变垂直
  • IE规则

    • 兼容 IE7,只需要关注两个属性即可:
  • lr-tb 对应的 CSS3 规则是:horizontal-tb
    - tb-rl 对应的 CSS3 规则是:vertical-rl

    • 兼容 IE8 及以上,关注和 CSS3 相对应的规则即可:
      • lr-tb 对应的 CSS3 规则是:horizontal-tb
      • tb-rl 对应的 CSS3 规则是:vertical-rl
      • tb-lr 对应的 CSS3 规则是:vertical-lr

以下的特性均可以在 IE 下实现

水平方向的 margin 合并

由于 writing-mode 可以改变纵横规则,所以原有的垂直 margin 合并也变成了 水平 margin 合并

普通块状元素可以使用 margin: auto 实现垂直居中
使用 text-align: center 实现图片垂直居中
图标旋转效果(IE7)

writing-mode 与 direction 的关系

direction 的 vertical-rl 的文档流为垂直方向, rl 表示的是水平方向,此时再设置 direction: rtl,实际上值 rtl 改变的是垂直方向的内联元素的文本方向,一横一纵,没有交集

而 writing-mode 可以对块状元素产生影响,直接改变了 CSS 世界的纵横规则,要比 direction 强大得多。

流向的改变

上一篇:[ESXi6.5]查看ntp服务器状态


下一篇:dive镜像分析工具