css中字符换行的一些问题 _博文列表

css中字符换行的一些问题

网络 2014/4/24 9:07:43
-------我们在处理文章的内容的过程中由于文章内容混杂有中文、英文、数字等其他字符，而我们常见的英文和数字是无法在包裹元素中自动换行，这往往会导致元素被撑破，如下图所示：
css中word-break可以解决这个问题，写个测试页面来做个笔记
css代码：
```
 body{font-size:14px;}
 p{ border:solid 1px red;width:200px;}
```
html代码：
```
<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等来保持界面的完整。
```
 
```
生活总是催促我们向前
阅读(638) 分享(0)

上一篇: 读取EXCEL 单元格无法读取空值不显示
下一篇: HTML5的语音识别技术x-webkit-speech