来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] css中word-break可以解决这个问题，写个测试页面来做个笔记css代码：body{font-size:14px;}p{ border:solid 1px red;width:200px;}body p class=testEnglish中文中文中文中文中文中文Englis333hEng...
|
css中word-break可以解决这个问题，写个测试页面来做个笔记
css代码：
body{font-size:14px;}
p{ border:solid 1px red;width:200px;}
<body>
<p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee
123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish
</p>
</body>
此时的运行效果如开题处所说，下面给p标签加点样式
css代码：
.test{ word-break:break-all;}
可以发现所有的文字不管是中文还是英文还是数字都可以在包裹的p标签的末尾位置自动强制转行，这会有一个问题，会把本来是一个组合的字符串拆分看影响效果，再看一个
css代码：
.test {word-break:hyphenate;}
此css将可能会撑破包裹元素的字符段在断字点进行提前换行
再看
css代码：
.test{ word-break:keep-all;}
在所有的字符段和字符段之间的空格处换行，保留了所有字符段的完整性。撑破包裹元素
word-break还有一些属性：
css代码：
.test{ word-break:normal;}/*浏览器默认换行*/
如果无需保持单词的完整性，break-all可以解决撑破容器的问题，因为在实际应用过程中不会有长度能超过一个容器宽度的单词，所以hyphenate能解决即要单词完整又能不撑破容器，其次在有些场景下可以采用滚动条或者overflow:hidden等来保持界面的完整。
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
