CSS解决内容撑开元素宽度问题

标签:
文本溢出css自动换行 |
分类: CSS |
不知道大家有没有遇到过这样一个问题------在一个元素内,放入一段文本,当文本够长时,它会撑开包含它的元素宽度,所有的内容都显示在一行。Of course,这种情况应该都遇到过吧。可纳闷的是,当足够长的文本出现时,有时会撑开元素的宽度,有时却不会,弄得人有点蒙圈。那到底什么情况下会撑开,什么情况下不会?撑开时如何解决?下面我们就来看如何pk它!!!!!!
前提:文本内容足够长即超出了浏览器的屏幕宽度且没br标签或回车换行。
说明:知道什么是回车换行吗?下面代码中的第10到到第11行就是(第10行还没填满这个编辑器,就人工回车。而第11行不是,虽然看上去有2段代码,但它都属于第12行,说明这两段代码之间没换行)。
下面以我们的母语为例,进行一个示例演示:
效果:
http://s5/bmiddle/0066Nca9zy7eweNnsPi74&690
http://s9/mw690/0066Nca9zy7eweKSaFOb8&690
2、会撑开元素宽度的情况:当文本内容非亚洲(比如英文)或一些数字,特殊字符等时
下面以英文为例:
效果:
http://s5/mw690/0066Nca9zy7ewdsN0ZC84&690
解决方案:强制换行
在#context中添加如下代码即可解决:
添加后的效果展示:
说明:
1>、上面出现的情况及解决的方案不仅适合块状元素,对内联元素也是一样的。