控制DIV内容换行CSS样式
利用 CSS 控制 DIV 块中内容强制换行。先来看下示例:一、未加CSS控制情况:
<div style="width:30%;"><!--数字串-->186608752,186608932,186610076,186600607,186576340,186576338,186610806,186610424,186586705,22833794,150555535,150634343,153999301,186610076,186600607,186576340,186576338,186610806,186610424,186586705,22833794,150555535,150634343,153999301<br/><br/><!--英文串-->break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text.This value is suited to Asian text that contains some excerpts of non-Asian text.keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.<br/><br/><!--中英文混排串-->测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content</div> 页面显示效果如下:
http://dl.iteye.com/upload/attachment/605736/c11ae593-8e98-3f4f-aaba-f836c111f8eb.bmp
二、加CSS控制情况:
<div style="width:30%;word-wrap:break-word;overflow:hidden;"><!--数字串-->186608752,186608932,186610076,186600607,186576340,186576338,186610806,186610424,186586705,22833794,150555535,150634343,153999301,186610076,186600607,186576340,186576338,186610806,186610424,186586705,22833794,150555535,150634343,153999301<br/><br/><!--英文串-->break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text.This value is suited to Asian text that contains some excerpts of non-Asian text.keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.<br/><br/><!--中英文混排串-->测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content,测试内容,test,content</div> 显示效果如下:
http://dl.iteye.com/upload/attachment/605738/27d954a0-c0bb-3e59-a695-5cbc338b3674.bmp
CSS:word-wrap:break-word;overflow:hidden;
word-wrap:控制换行,当break-word时,是强制换行;
与 break-word 不同,是控制是否断词的。
overflow 属性规定当内容溢出元素框时发生的事情,当 hidden时,内容会被修剪,并且其余内容是不可见的。
页:
[1]