首页 > Web开发 > 详细

文本缩进 | text-indent (Miscellaneous Level 1) - CSS 中文开发手册 - Break易站

时间:2020-06-30 22:30:57      阅读:69      评论:0      收藏:0      [点我收藏+]
  • ??CSS 中文开发手册

    文本缩进 | text-indent (Miscellaneous Level 1) - CSS 中文开发手册

    text-indentCSS属性指定在一个块的文本行之前把压痕(空的空间)的量。默认情况下,这只控制块的第一个格式化行的缩进,但可以使用hanging和each-line关键字来改变这种行为。

    /* <length> values */
    text-indent: 3mm;
    text-indent: 40px;
    
    /* <percentage> value
       relative to the containing block width */
    text-indent: 15%;
    
    /* Keyword values */
    text-indent: 5em each-line;
    text-indent: 5em hanging;
    text-indent: 5em hanging each-line;
    
    /* Global values */
    text-indent: inherit;
    text-indent: initial;
    text-indent: unset;

    水平间距是相对于包含块级元素的内容框的左侧(或右侧,从右到左布局)的边缘。

    Initial value

    0

    应用对象

    block containers

    是否可继承

    yes

    百分比值

    refer to the width of the containing block

    媒体

    visual

    计算值

    the percentage as specified or the absolute length, plus any keywords as specified

    动画类型

    a length, percentage or calc();

    规范顺序

    The length or percentage before the keywords, if both are present. If several keywords are present, they appear in the same order as their appearance in the formal grammar.

    语法

    <length>缩进被指定为绝对<length>。负值是允许的。查看<length>可能的单位的值。

    <percentage>缩进是<percentage>包含块的宽度。

    each-line缩进会影响块容器的第一行以及强制换行后的每一行,但不会影响软换行后的行。

    hanging反转哪一行是缩进的。除第一行之外的所有行将被缩进。

    形式语法

    <length-percentage> && hanging? && each-line?where 
    <length-percentage> = <length> | <percentage>

    简单缩进示例

    HTML

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

    CSS

    p { 
      text-indent: 5em;
      background: powderblue;
    }

    缩进百分比示例

    HTML

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

    CSS

    p { 
      text-indent: 30%;
      background: plum;
    }

    规范

    Specification

    Status

    Comment

    CSS Text Module Level 3The definition of ‘text-indent‘ in that specification.

    Working Draft

    Adds the hanging and each-line keywords.

    CSS TransitionsThe definition of ‘text-indent‘ in that specification.

    Working Draft

    Lists text-indent as animatable.

    CSS Level 2 (Revision 1)The definition of ‘text-indent‘ in that specification.

    Recommendation

    The behavior with display: inline-block and anonymous block boxes is explicitly defined.

    CSS Level 1The definition of ‘text-indent‘ in that specification.

    Recommendation

    Initial definition.

    浏览器兼容性

    Feature

    Firefox (Gecko)

    Chrome

    Edge

    Internet Explorer

    Opera

    Safari

    Basic support

    1.0 (1.7 or earlier)

    1.0

    (Yes)

    3.0

    3.5

    1.0 (85)

    hanging

    No support1

    No support

    No support

    No support

    No support

    No support

    each-line

    No support1

    No support

    No support

    No support

    No support

    No support

    Feature

    Firefox Mobile (Gecko)

    Android

    Edge

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    1.0 (1.9.2)

    ?

    (Yes)

    ?

    ?

    ?

    hanging

    No support

    No support

    No support

    No support

    No support

    No support

    each-line

    No support

    No support

    No support

    No support

    No support

    No support

  • ??CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32017.html

    文本缩进 | text-indent (Miscellaneous Level 1) - CSS 中文开发手册 - Break易站

    原文:https://www.cnblogs.com/breakyizhan/p/13216298.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
    © 2014 bubuko.com 版权所有
    打开技术之扣,分享程序人生!