word-break属性指定非CJK脚本的断行规则。
注意:CJK脚本是中国,日本和韩国(”中日韩”)脚本。
word-break: normal|break-all|keep-all;
值 | 描述 |
normal | 使用浏览器默认的换行规则。 |
break-all | 允许在单词内换行。 |
keep-all | 只能在半角空格或连字符处换行。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style>
.test1
{
width:222px;
border:1px solid #000000;
/*只能在半角空格或连字符处换行。*/
word-break:keep-all;
}
.test2
{
width:222px;
border:1px solid #000000;
/*允许在单词内换行。*/
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis minima molestiae nemo quidem sit ut. Aperiam asperiores assumenda ducimus, explicabo ipsa maxime nam nemo provident qui quibusdam vel velit?</p>
<p class="test2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid architecto beatae cumque debitis deleniti, eligendi, eveniet explicabo iste labore nemo possimus quis sequi, soluta suscipit ut velit! Ipsam, vitae.</p>
</body>
</html>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis minima molestiae nemo quidem sit ut. Aperiam asperiores assumenda ducimus, explicabo ipsa maxime nam nemo provident qui quibusdam vel velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid architecto beatae cumque debitis deleniti, eligendi, eveniet explicabo iste labore nemo possimus quis sequi, soluta suscipit ut velit! Ipsam, vitae.
表格中的数字表示支持该属性的第一个浏览器版本号。
Safari | Chrome | FireFox | IE |
1.0 | 1.0 | 1.0 | 4.0 |