CSS overflow-wrap 属性-之路教程

语法

overflow-wrap: normal | anywhere | break-word | initial | inherit;

溢出包装属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        width: 200px;
        margin: 3px;
        background: #ccc;
      }
      .anywhere {
        overflow-wrap: anywhere;
      }
      .break-word {
        overflow-wrap: break-word;
      }
      .normal {
        overflow-wrap: normal;
      }
      .auto {
        overflow-wrap: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-wrap 属性示例</h2>
    <h3>Overflow-wrap: normal</h3>
    <p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回, <em class="normal"> aaabbbcccddddeeefffggghhhiiijjjkkklllmmmoooppp</em> 于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </p>
    <h3>Overflow-wrap: anywhere</h3>
    <p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,<em class="anywhere">aaabbbcccddddeeefffggghhhiiijjjkkklllmmmoooppp </em>于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </p>
    <h3>Overflow-wrap: break-word</h3>
    <p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回, <em class="break-word">aaabbbcccddddeeefffggghhhiiijjjkkklllmmmoooppp </em>于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </p>
    <h3>Overflow-wrap: auto</h3>
    <p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回, <em class="auto">aaabbbcccddddeeefffggghhhiiijjjkkklllmmmoooppp</em> 于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </p>
  </body>
</html>

word-wrap 和 overflow-wrap 属性

word-wrap 属性采用与 overflow-wrap 属性相同的值。
这些属性的行为也相似。

初始值	normal
应用于	所有元素。
继承	可继承
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.OverFlowWrap =“normal”;

CSS overflow-wrap 属性值说明

值	描述
normal	线条仅根据普通线条破坏规则打破。即使溢出容器，单词也不会破坏。这是此属性的默认值。
anywhere	如果线路中没有其他可接受的断点，那么长的单词或者URL将在任何时候打破。即使使用连字符属性，连字符也不会破坏。
break-word	不适合其容器内部的长词或者字符串将在任意地处于武力地点突破，以强制换行符，但在计算最小内容的内在尺寸时，不考虑由字断裂引入的软包装机会。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

Overflow-wrap VS Word-break

尽管 overflow-wrap 和 word-break 的行为相似，但它们之间存在差异。
如果无论使用何种语言，都不能在不溢出的情况下将其放置在行上，则溢出包装属性会中断单词。
word-break 属性用于非英语语言，并指定中文、日语和韩语 (CJK) 等语言的字母之间的换行。

CSS overflow-wrap 属性

overflow-wrap 属性用于指定浏览器是否可以在不可破坏的字符串中换行，从而防止内容溢出。

overflow-wrap 属性只有三个值：normal、break-word 和 anywhere。

溢出换行名称被认为是自动换行属性的标准名称。

日期：2020-06-02 22:14:42 来源：oir作者：oir

←CSS overflow-anchor 属性

CSS overflow-x 属性→

语法

溢出包装属性的示例：

word-wrap 和 overflow-wrap 属性

CSS overflow-wrap 属性值说明

Overflow-wrap VS Word-break

目录