加载中…
个人资料
林忆甜sky
林忆甜sky
  • 博客等级:
  • 博客积分:0
  • 博客访问:1,564
  • 关注人气:2
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

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

(2017-09-25 18:16:12)
标签:

文本溢出

css自动换行

分类: CSS


不知道大家有没有遇到过这样一个问题------在一个元素内,放入一段文本,当文本够长时,它会撑开包含它的元素宽度,所有的内容都显示在一行。Of course,这种情况应该都遇到过吧。可纳闷的是,当足够长的文本出现时,有时会撑开元素的宽度,有时却不会,弄得人有点蒙圈。那到底什么情况下会撑开,什么情况下不会?撑开时如何解决?下面我们就来看如何pk它!!!!!!

 

前提:文本内容足够长即超出了浏览器的屏幕宽度且没br标签或回车换行。

说明:知道什么是回车换行吗?下面代码中的第10到到第11行就是(第10行还没填满这个编辑器,就人工回车。而第11行不是,虽然看上去有2段代码,但它都属于第12行,说明这两段代码之间没换行)。


http://s5/mw690/0066Nca9zy7ewdciQ3q34&690


    1、
不会撑开元素宽度的情况:当文本内容为亚洲语言时

下面以我们的母语为例,进行一个示例演示:

效果:


http://s5/bmiddle/0066Nca9zy7eweNnsPi74&690

    结果:没撑开

    :源码


http://s9/mw690/0066Nca9zy7eweKSaFOb8&690

http://s5/mw690/0066Nca9zy7ewdmV7Ks54&690

       

      说明:看前面的前提,但其实当为亚洲语言时,有没有人工回车都一样。


2、会撑开元素宽度的情况:当文本内容非亚洲(比如英文)或一些数字,特殊字符等时

下面以英文为例:

效果:


http://s4/mw690/0066Nca9zy7ewdpwxHB03&690
http://s5/mw690/0066Nca9zy7ewdsN0ZC84&690


    结果撑开了。

 

 

解决方案:强制换行

#context中添加如下代码即可解决:


http://s15/mw690/0066Nca9zy7ewdzMGfk6e&690


添加后的效果展示:


http://s12/mw690/0066Nca9zy7ewdDpvsL7b&690


  提示
:关于自动换行的更多详细内容,请查看: CSS控制文本自动换行

说明

1>、上面出现的情况及解决的方案不仅适合块状元素,对内联元素也是一样的。

    2>、当然也有许多其他方案解决,比如JS,但是CSS比较简单。

    还有特别需要注意的是:有的同学说,为什么不用overflow?它也能将超出容器的内容隐藏掉啊!是的呀,可是这种解决方法不是我们需要的------它会把超出的内容剪切掉,剪掉的部分并不会重新显示在容器中了,这样会使得原本的文本变得不完整。

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有