• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • overflow-wrap

    版本:CSS3

    CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。

    与word-break相比,overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

    注:word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的“别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

    示例

    /* keyword values */
    overflow-wrap: normal;
    overflow-wrap: break-word;
    
    /* global values */
    overflow-wrap: inherit;
    overflow-wrap: initial;
    overflow-wrap: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持overflow-wrap

    语法:

    overflow-wrap:normal| break-word

    取值:

    • normal:允许内容顶开或溢出指定的容器边界。
    • break-word:内容将在边界内换行。如果需要,单词内部允许断行。break-word表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。
    默认值normal
    适用于所有元素
    继承性
    动画性
    计算值指定值

    例子

    p { width: 13em; background: gold; }
    p { width: 13em; background: gold; overflow-wrap: break-word; }
    p.test{word-wrap:break-word;}
    

    上篇:word-wrap

    下篇:word-spacing