溢出包装 | overflow-wrap (Text) - CSS 中文开发手册 - Break易站

  •   CSS 中文开发手册

    溢出包装 | overflow-wrap (Text) - CSS 中文开发手册

    该overflow-wrapCSS属性指定浏览器是否应该向语句中插入换行符,以防止文本溢出其内容框。与word-break相反,如果整个单词不能在没有溢出的情况下放在自己的行上,overflow-wrap只会创建一个中断。

    1
    2
    3
    4
    5
    6
    7
    8
    /* Keyword values */
    overflow-wrap: normal;
    overflow-wrap: break-word;
     
    /* Global values */
    overflow-wrap: inherit;
    overflow-wrap: initial;
    overflow-wrap: unset;

    该属性最初是一个非标准的,没有前缀的微软扩展word-wrap,并被大多数具浏览器实现。现在,它已经被重新命名为overflow-wrap,而word-wrap则作为该属性的一个别名。

    Initial value

    normal

    Applies to

    all elements

    Inherited

    yes

    Media

    visual

    Computed value

    as specified

    Animation type

    discrete

    Canonical order

    the unique non-ambiguous order defined by the formal grammar

    语法

    该overflow-wrap属性被指定为下面的列表中的任一个关键字值。

    可能值

    normal——行只能在正常的单词断点处(如两个单词之间的空格)断开。

    break-word——为了防止溢出,如果在行中没有其他可接受的断点,通常不能破坏的语句也可能会在任意点被断开。

    形式语法

    1
    normal | break-word

    实例

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .normal {
      width: 13em;
      background: gold;
    }
    .break-word {
      width: 13em;
      background: lime;
      overflow-wrap: break-word;
    }

    HTML

    1
    2
    3
    4
    5
    6
    <p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des
      Fernstraßenbauprivatfinanzierungsgesetzes
      und straßenverkehrsrechtlicher Vorschriften)</p>
    <p class="break-word">FStrPrivFinÄndG (Gesetz zur Änderung des
      Fernstraßenbauprivatfinanzierungsgesetzes
      und straßenverkehrsrechtlicher Vorschriften)</p>

    结果

    规范

    Specification

    Status

    Comment

    CSS Text Module Level 3The definition of 'overflow-wrap' in that specification.

    Working Draft

    Initial definition

    浏览器兼容性

    Feature

    Firefox (Gecko)

    Chrome

    Edge

    Internet Explorer

    Opera

    Safari

    Basic support (as word-wrap)

    3.5 (1.9.1)

    1.0

    (Yes)

    5.5

    10.5

    1.0

    overflow-wrap

    49 (49)

    (Yes)

    No support

    ?

    (Yes)

    (Yes)

    Feature

    Firefox Mobile (Gecko)

    Android

    Edge

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support (as word-wrap)

    1.0 (1.9.1)

    1.0

    (Yes)

    ?

    ?

    1.0

    overflow-wrap

    49 (49)

    (Yes)

    No support

    ?

    (Yes)

    (Yes)

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

    posted on   MrAit  阅读(524)  评论(0编辑  收藏  举报

    编辑推荐:
    · SQL Server 内存占用高分析
    · .NET Core GC计划阶段(plan_phase)底层原理浅谈
    · .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
    · 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
    · 一个超经典 WinForm,WPF 卡死问题的终极反思
    阅读排行:
    · 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
    · 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多
    · C# 开发工具Visual Studio 介绍
    · 在 Windows 10 上实现免密码 SSH 登录
    · C#中如何使用异步编程

    导航

    < 2025年1月 >
    29 30 31 1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31 1
    2 3 4 5 6 7 8
    点击右上角即可分享
    微信分享提示