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;

浏览器支持

语法:

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

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

取值:

• normal:依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
• keep-all:与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
• break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

例子

//HTML 
1. word-break: normal
this is a long and
 honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
2. word-break: break-all
this is a long and
 honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
3. word-break: keep-all
this is a long and
 honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
4. word-break: break-word
 
this is a long and 
  honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉

//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;}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com