HTML+CSS段落样式裁剪，word-break；word-wrap；

本文将介绍关于段落样式裁剪的两部分内容，一部分是设置换行，另一部分是强制不换行

主要涉及到的属性有：

word-break;

word-wrap;

white-space;

over-flow;

text-overflow;

     

1.下面是w3cschool上对这两属性的描述，通俗地来讲，就是设置段落在什么时候进行换行；

测试，中英文实时对比

（1）取word-break：normal；//表示默认浏览器换行设置；

  取word-wrap：normal；//同上；

p{font-size:15px;text-indent:2em;width:350px;border:1px dashed #666;}#p1{word-break:normal;}/*由浏览器默认换行设置*/#p2{word-wrap:normal;}/*同上*/
秋天，无论在什么地方的秋天，总是好的；可是啊，北国的球，却特别地来的清，来的静，来的悲凉。我的不远万里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这“秋”，这故都的秋。
    
秋天，无论在什么地方的秋天，总是好的；可是啊，北国的球，却特别地来的清，来的静，来的悲凉。我的不远万里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这“秋”，这故都的秋。
    
Use this utility to compress your CSS to increse loading speed and save on bandwidth as well. You can choose from three levels of compression, depend on how legible you want the compressed CSS to versus degree of compression. The "Normal" mode should work well in most cases,creating a good balance between the two.
    
Use this utility to compress your CSS to increse loading speed and save on bandwidth as well. You can choose from three levels of compression, depend on how legible you want the compressed CSS to versus degree of compression. The "Normal" mode should work well in most cases,creating a good balance between the two.

结果如图；得到浏览器默认的换行规则。

（2）取word-break：break-all；//表示允许在单词内换行

  取word-wrap：break-word；//表示在长单词和url地址可以换行

p{font-size:15px;text-indent:2em;width:350px;border:1px dashed #666;}#p1{word-break:break-all;}/*允许在单词内换行*/#p2{word-wrap:break-word;}/*在长单词或url地址内换行*/
秋天，无论在什么地方的秋天，总是好的；可是啊，北国的球，却特别地来的清，来的静，来的悲凉。我的不远万里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这“秋”，这故都的秋。
    
秋天，无论在什么地方的秋天，总是好的；可是啊，北国的球，却特别地来的清，来的静，来的悲凉。我的不远万里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这“秋”，这故都的秋。
    
Use this utility to compress your CSS to increse loading speed and save on bandwidth as well. You can choose from three levels of compression, depend on how legible you want the compressed CSS to versus degree of compression. The "Normal" mode should work well in most cases,creating a good balance between the two.
    
Use this utility to compress your CSS tooooooooooooootooooooooooooooooooooooooooooooooo increse loading speed and save on bandwidth as well. You can choose from three levels of compression, depend on how legible you want the compressed CSS to versus degree of compression. The "Normal" mode should work well in most cases,creating a good balance between the two.

得到结果如下图；发现，

中文字样一致。

英文单词与描述一致，前者可在单词内换行，后者长单词可以在内部换行。

（3）取word-break：keep-all；//表示只能在半角空格或连接符处才可以换行

p{font-size:15px;text-indent:2em;width:350px;border:1px dashed #666;}#p1{word-break:keep-all;}/*只能在半角空格和连字符处换行*/
秋天，无论在什么地方的秋天，总是好的；可是啊，北国的球，却特别地来的清，来的静，来的悲凉。我的不远万里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这“秋”，这故都的秋。
    
Use this utility to compress your CSS to increse loading speed and save on bandwidth as well. You can choose from three levels of compression, depend on how legible you want the compressed CSS to versus degree of compression. The "Normal" mode should work well in most cases,creating a good balance between the two.

得到如图；其中空格及连接符默认半角，如图，仅仅在连接符处采取了换行，第四行后面的字数太多，因此在此就换行了；英文段落也是如此。

           

以上是设置换行属性，下面介绍强制不换行属性设置；

2.设置属性white-space；

当文本超出所在范围时，需要属性overflow来设置范围之外的文本的处理

属性：overflow

属性值：visible：范围之外的内容不会被修剪，溢出的内容会呈现在元素内容范围之外

hidden：范围之外的内容会被修剪，且不可查看

scroll：范围之外的内容会被修剪，但浏览器会显示滚动条来查看被修剪掉的内容

auto：表示如果溢出的内容被修剪，浏览器会自动设置滚动条

当容器内的文本超出范围后，使用text-overflow用来产生省略号，

属性：text-overflow

属性值：ellipsis：显示省略号代替被修剪的文本

举例：段落

设置：white-space：nowrap；

overflow：nowrap；

text-overflow：ellipsis；

p{font-size:15px;text-indent:2em;width:350px;border:1px dashed #666;}#p1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
秋天，无论在什么地方的秋天，总是好的；可是啊，北国的球，却特别地来的清，来的静，来的悲凉。我的不远万里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这“秋”，这故都的秋。

结果如图