专栏首页李才哥css中换行的特殊用法

css中换行的特殊用法

word-break:break-all; 和 word-wrap:break-word;两种写法都是让英文句子在父级宽度不够的情况下换行。

两个属性都同样是让文字换行,但存在着细微的区别,大部分时候刚接触到这两个属性时会无法区别两个的区别

下面讲一下两者的区别:

word-wrap:break-word; 作用是强制让文字换行。一般情况下当父级宽度不够的时候,不管英文单词自动换行是当一整个单词不够放时,整个单词一起换行到下一行,

看似很合理的写法,但是在有些情况下会出现不可预期的情况。就是当一个英文单词的长度超过了父级容器长度是,英文单词还是会显示一整个单词而导致超出容器范围。

还有的情况是,当遇到一个单词很长时,次单词自动换行,也会使上一行空出很多空间浪费了。

在这种情况下,IE创造出一种新的属性,word-break:break-all; 它强制文字换行无论一句话到达父级容器宽度的时候是不是一整个单词,都会强制换行,使单词断句,

如果碰上一个单词超出父级容器宽度,会使单词断开并换行。

兼容性:

word-break:break-all; 只不兼容opera,其他浏览器都兼容

word-wrap:break-word;兼容所有浏览器

两种写法的各有作用,应视情况做出选择!

white-space主要用来设置CJK文本是否不折行,实际中主要用white-space:nowrap来让文本不折行。

word-wrap主要用来设置非CJK文本是否折行(因为CJK文本会自动折行),如果空间足够,不会对单词内部进行截断

word-break同样主要用来设置非CJK文本是否折行,但是会对单词内部进行截断

word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break 属性用来标明怎么样进行单词内的断句。

用法: word-wrap: normal|break-word;

word-break:normal|break-all|keep-all;

显然两个样式都可以解决换行的问题,那么它们直接的区别呢?

当一段文字有一个长长长的英文单词的情况下使用这两个属性的区别:

word-wrap:

word-break:

区别就是长单词在word-wrap作用下换到下一行,后面可以正常还行,word-break的作用下利用了上一行没有用完的空间。

感悟:有些不起眼的小属性平常可能觉得无关紧要,可是在有些恰恰好的情况下确可以充当救世主的角色。

本文分享自微信公众号 - 李才哥(liqi13695515224),作者:李才哥

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Myeclipse 2017 Ci 5中文版

    1、解压安装包,并点击“myeclipse-2017-ci-5-offline-installer-windows.exe”开始正式的安装,等待解压完成

    李才哥
  • Bootstrap 响应式框架 第四集

    1、最外层 由nav并且引用 navbar navbar-default 两个类选择器来组成的

    李才哥
  • git中的骚操作

    李才哥
  • word-break 和 word-wrap 的区别

    本文主要要介绍的是 CSS 中 word-break: break-all 和 word-wrap: break-word 的区别,虽然这两个属性都有使用过,但...

    IMWeb前端团队
  • word-break 和 word-wrap 的区别

    本文主要要介绍的是 CSS 中 word-break: break-all 和 word-wrap: break-word 的区别,虽然这两个属性都有使用过,但...

    IMWeb前端团队
  • 前端笔记,table标签中td宽度不受控制的坑

    在table标签中,td的宽度设置好后,是没有用的,因为table是一个整体,他的td宽度是由其中一个最长td宽度决定的,

    小小鱼儿小小林
  • HTML 文字段落标点符号不出现在行首

    加两个css样式即可解决问题。 1. word-break: normal; (自动换行, 标点不出现在行首) 2. text-align: jus...

    RD.Timon
  • ApkUpdater:更新应用而无需应用市场

    美丽应用
  • eval()函数解析

    由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。...

    闵开慧
  • ubuntu16 启动器Launcher位置以及自动隐藏

    I solve it by changing the button with CCSM (CompizConfig Settings Manager):

    bear_fish

扫码关注云+社区

领取腾讯云代金券