css 长单词不换行溢出容器的解决方法 word-wrap与word-break
这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是太拗口了,长得又差不多,导致连背都很难背下来。
那它们到底是什么呢?我在mozilla的官网上找到如下的解释:
word-wrap
word-break
我们看到两个解释中都出现了 break lines within words 这样的词汇,说明它们都跟单词内断句又关。然后我们试着翻译一下上面的两段英文:
word-wrap:
css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
word-break:
css的 word-break 属性用来标明怎么样进行单词内的断句。
貌似从上面两个读着都蛋疼的翻译中找到了一些区别:word-wrap 强调的是是否允许单词内断句,而word-break强调的则是怎么样来进行单词内的断句。
说到这里,好像依然不是很明朗,好吧,表达能力差的孩纸真是伤不起啊,只能用些实例来补救了。
首先,何谓单词内断句?当然这里指的都是西文单词。
这是没有单词内断句的情况,我们看到那个单词是在是太长了,所以它溢出了包裹它的容器。
这是进行了单词内断句的情况,就是一个单词被断作了两行。
先要明确一点,不加word-wrap或word-break的时候,就是浏览器默认的时候,如果有一个单词很长,导致一行中剩下的空间已经放不下它时,则浏览器会把这个单词挪到下一行去:
word..d 这个我们创造出来的单词本来应该紧接在 long 后面的,但是long后剩下的空间已经不够了,而单词默认是不能断开的,所以浏览器就只好把它屈尊下移了。
这个长单词还不算变态的,因为至少它没有长到超过包裹它的元素的长度,但是如果超过了呢?
如果超过了就像前面我们提到过的,它会溢出它的父容器外,因为这时它是不允许被截断的,那就只能冲出去咯。
这个时候word-wrap就能派上用场了。我们给这段文字加上word-wrap:break-word看看会怎么样
哈哈,你给我滚回去吧,变态的长单词,即使你断了也无所谓。
这样,为了防止长单词溢出,就在它的内部断句了。这就是 word-wrap:break-word 的功能。
在看看word-wrap的浏览器支持情况:
很好,几乎所有浏览器都支持。
好吧,你现在可以说了,都有了word-wrap这个东西,那还要 word-break 来干什么鸟?
万恶的资本家总是想要榨干劳动者的一切,你看,下图中的long后面不是还有一段空间吗,难道就这样放着?太浪费了。。。
是啊,long后面那里足可以放好几个短的单词了,都是那个臭变态的长单词!
所以IE真的很体贴,不要再骂它啦,考虑到不浪费一点点空间的问题,它创造出了 word-break 这个东西。现在我们来看看使用 word-break:break-all; 后会怎么样。
看看发生什么了?那个变态的长单词并没有被挪到下一行,而是直接放在了long后面,然后在父容器的右边界断开了。所以,它没有浪费空间了哦。
再看下word-break:break-all的浏览器支持情况:
除了opera外,其他都支持耶(火狐也从不支持改为支持了)!
最开始我们说了,word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句。
而word-break:break-all则更变态,因为它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的,那就是——用了word-break:break-all,就等于使用粗暴方式来断句了。总之一句话,如果您想更节省空间,那就用word-break:break-all就对了!
但无论如何,单词内的断句都会对西文的可读性产生一定的影响,有时候这点就要注意了。
ps:网上有些文章说,word-wrap:break-word 对长串英文不起作用,其实这是非常错误的,word-wrap:break-word照样能把一个长串英文或数字拆成多行。事实上,word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句,不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。
转自:http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html
css 长单词不换行溢出容器的解决方法 word-wrap与word-break相关推荐
- html中图片太大了,css背景图片太大的坏处与解决方法
在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...
- arduino红外遥控库IRremote的IRsend类sendRaw函数溢出问题及其解决方法
arduino红外遥控库IRremote的IRsend类sendRaw函数溢出问题及其解决方法 参考文章: (1)arduino红外遥控库IRremote的IRsend类sendRaw函数溢出问题及其 ...
- css之文本两端对齐的两种解决方法
css之文本两端对齐的两种解决方法 参考文章: (1)css之文本两端对齐的两种解决方法 (2)https://www.cnblogs.com/wl0804/p/11265225.html 备忘一下.
- jmeter(二十二)内存溢出原因及解决方法
jmeter(二十二)内存溢出原因及解决方法 参考文章: (1)jmeter(二十二)内存溢出原因及解决方法 (2)https://www.cnblogs.com/imyalost/p/7901064 ...
- css样式对IOS设备苹果手机不支持解决方法
css样式对IOS设备苹果手机不支持解决方法 在写移动端的网页的时候发现到苹果的设备上浏览的时候按钮变成了苹果的灰色按钮. 在class文件中写入下面的代码可以解决. input[type=" ...
- textarea赋值时换行符无效的解决方法
textarea赋值时换行符无效的解决方法 参考文章: (1)textarea赋值时换行符无效的解决方法 (2)https://www.cnblogs.com/liuzhibin/p/9345632. ...
- ci框架中引入css,php ci框架中加载css和js文件失败的原因和解决方法
php ci框架中加载css和js文件失败的原因和解决方法 发布时间:2021-07-01 12:08:38 来源:亿速云 阅读:50 作者:chen 本篇内容介绍了"php ci框架中加载 ...
- css中多行文本溢出显示省略号的方法
下面这几行代码可以直接复制到css样式中,实现溢出显示省略号的效果 overflow: hidden; //首先固定宽高,然后让溢出的文字隐藏 text-overflow: ellipsis; dis ...
- css外边距溢出处理方法,CSS高度坍塌和外边距溢出问题及解决方法
高度坍塌成因 父元素div未设置高度 子元素全部设置浮动(float: left | right;),浮动元素脱离文档流且不占页面空间 由于父元素为设置高度,高度靠内部子元素撑开,而今子元素全部脱离文 ...
最新文章
- redis python zset
- 详解神秘Linux内核
- volitile关键字
- 【Selenium 小知识】获取 token 和 cookies
- jvm-垃圾回收随时都可以STW吗?带你认识安全点和安全区域
- javax.script.ScriptException: ReferenceError: xxx is not defined in eval
- python循环函数怎么改变变量_python:循环定义多个变量
- 用websocket技术开发的web聊天系统
- windows10下Kafka环境搭建
- c语言 指针 地址溢出,堆栈溢出,指针在C中
- 欧姆龙服务器显示oE,欧姆龙CP1H-E系列PLC实现Modbus TCP\RTU\ASCII通信视频教程
- Linux如何搜索查找文件里面内容
- 第三方定量定性质谱检测技术实验
- 淘宝优惠券商城赚钱是真的吗?购物最便宜的app
- 2021-02-13L:1652 2.08---2.141576L
- simpson积分公式
- 云计算通俗解释,什么叫云计算
- 基于单片机住宅家庭防盗报警系统设计-毕设课设资料
- altium designer原理图生成pcb
- 读《长安的荔枝》有感
热门文章
- 网易新闻回答2021:靠差异化内容逆势增长
- 京东价格监控软件开发技术探讨十四:电商领域区块链融合模式采集的探讨
- 电脑中删掉的照片怎么恢复
- 从程序员到项目经理:懂电脑更要懂人脑
- ESP32-IDF开发笔记 | 01 - ESP-IDF开发环境搭建(2023.04.08更新)
- crc16-ccitt算法c语言,CRC-CCITT 标准CRC16(1021) 算法校验类
- 同期群分析是什么?教你用 SQL 来搞定
- [paper]Intriguing properties of neural networks(L-BFGS)
- asp.net930-绿能店电动车租赁系统
- 微信小程序:连续签到7天签到积分获得功能设计