css3中word-wrap与wrod-break的区别

在默认情况下，当单词过长，在一行中无法容纳时，文段会另起一行来放置长单词，如果此时整行都无法容纳该长单词，那么单词会溢出。

1.word-wrap:break-word;

使用word-wrap的情况下，遇见长单词会先换行，看是否容纳该长单词，如果能容纳，就不对单词进行拆分;如果另起一行任不能容纳，就会对单词进行拆分。

2.word-break:break-all;

使用word-break的情况，遇见长单词，不会再另起一行，而是粗暴的直接进行单词的拆分。

链接

css3中word-wrap与wrod-break的区别相关推荐

css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
java中iscontinue意思_Java 中return、continue和break的区别
写在前面:适合Java初学者,大神就别来了. 今天同事突然问我return和break的区别,以前觉得随口都能说出来的东西,今天突然卡了,记得模模糊糊,只能说出个大概,所以这里做一个总结,还是那句话, ...
html中word wrap,HTML的断行word-wrap: break-word 和 word-break: break-all 到底有啥区别？
1做项目改bug的时候,遇到过好多次,要么是文本超出文本区域,或者单词太长(一般是url链接中的一些鬼),把装它的标签强制撑大,导致一些响应式问题.除此之外,还有很多问题,每次都是恍然醒悟,然后又在网 ...
CSS3中word-break和word-wrap有什么区别？
大家都知道在CSS3中增加了很多新的属性,其中word-break和word-wrap就是用来给文本换行使用的,但是两者有什么区别很多小伙伴都不是很清楚.今天小千就来告诉你他们究竟有什么不同,应该用在 ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
CSS3中背景的四个新的属性
本文对CSS3中背景的四个新的属性进行了详细介绍. 多重背景图片 Css3中,对一个元素可以使用一张以上的背景图片.除了使用逗号将图片分开以外,其代码与css2相同.第一个声明的图片定位在元素的顶部, ...
CSS3中的3D变换与简易立方体的制作
大家好,这里是demo软件园,今天为大家分享的是css3中的3d变换. 我们首先要知道在浏览器中,X轴是从左到右,Y轴是从上到下,Z轴是从里到外.CSS的3d变换中,有以下属性: A.3D旋转: CS ...
css3中的渐变效果及花斑动画的实现
大家好,这里是demo软件园,今天为大家分享的是css3中的渐变效果. css3中的渐变需要注意的是渐变的是图片而不是颜色,而渐变又分为两种:线性渐变与径向渐变,今天我们重点介绍的是线性渐变. 1.线 ...
浅谈CSS3中的弹性布局
浅谈CSS3中的弹性布局现在的努力,只是为了实现小时候吹过的牛逼一.什么是弹性布局? Flex是Flexible Box的缩写,意为"弹性布局",他为盒模型提供了最大的灵活性. ...
CSS3中3D综合应用及分析
2019独角兽企业重金招聘Python工程师标准>>> 今天我要和大家一起来学习一个酷炫的鼠标Hover效果.主要将会涉及到CSS3中3D效果的使用,以及在实现过程中我们使用到的一些 ...

css3中word-wrap与wrod-break的区别

css3中word-wrap与wrod-break的区别相关推荐

最新文章

热门文章