• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • word-break

    版本:CSS3

    CSS 属性 word-break 指定了怎样在单词内断行。

    示例

    word-break: normal 
    word-break: break-all 
    word-break: keep-all
    word-break: break-word; /* deprecated */ 
    
    /* Global values */
    word-break: inherit;
    word-break: initial;
    word-break: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持word-break

    语法:

    word-break:normal| keep-all| break-all

    设置或检索对象内文本的字内换行行为。

    • 对于解决防止页面中出现连续无意义的长字符打破布局,应该使用break-all属性值;
    • 作为IE的私有属性之一,IE5.5率先实现了word-break,后期被w3c采纳成标准属性;
    • 对应的脚本特性为wordBreak

    取值:

    • normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。
    • keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。
    • break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字母间断行。
    默认值normal
    适用于所有元素
    继承性
    动画性
    计算值指定值
    相关属性word-wrap

    例子

    //HTML
    
    <p>1. <code>word-break: normal</code></p>
    <p class="normal narrow">this is a long and
     honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
     グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
    
    <p>2. <code>word-break: break-all</code></p>
    <p class="breakall narrow">this is a long and
     honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
     グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
    
    <p>3. <code>word-break: keep-all</code></p>
    <p class="keepall narrow">this is a long and
     honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
     グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
    
    <p>4. <code>word-break: break-word</code></p> 
    <p class="breakword narrow">this is a long and 
      honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
     グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
    //CSS
    
    .narrow {
      padding: 5px;
      border: 1px solid;
      display: table;
      max-width: 100%;
    }
    
    .normal {
      word-break: normal;
    }
    
    .breakall {
      word-break: break-all;
    }
    
    .keepall {
      word-break: keep-all;
    }
    
    .breakword { 
      word-break: break-word; 
    } 
    
    p.test{word-break:break-all;}
    

    上篇:tab-size

    下篇:word-wrap