word-wrap:break-word和word-break:break-all的异同

最新推荐文章于 2023-10-17 14:22:12 发布
最新推荐文章于 2023-10-17 14:22:12 发布
阅读量46 收藏
点赞数
原文链接：http://www.cnblogs.com/crystalmoore/p/5497183.html
版权

共同点：word-wrap:break-word与word-break:break-all都能把长单词强行断句

不同点：word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；

           word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

转载于:https://www.cnblogs.com/crystalmoore/p/5497183.html

weixin_30755709
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
word-wrap和word-break,white-space的区别
qq_41884544的博客
02-10 674
默认情况下，也就是不添加word-break,word-wrap(或者两者属性值均为normal时)，浏览器对于一个单词比较长，以至于本行中剩余的空间已经放不下它时，浏览器会将这个单词移动到下一行。如果一个单词太长，以至于它一个单词的长度都超出元素宽度时，单词就会“冲出范围”，而不会对该单词截断并将截断部分下移。 1.white-space white-space是用来处理元素中的空白符的，有如下常用属性 1.1 white-space: normal 默认值。空白会被浏览器忽略 代码片段： .
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3152
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
word-wrap : normal | break-word
柯兄技术博客
07-22 1368
 word-wrap版本：IE5.5+专有属性　继承性：有 语法： word-wrap : normal | break-word  参数： normal : 　允许内容顶开指定的容器边界break-word : 　内容将在边界内换行。如果需要，词内换行（word-break）也行发生 说明： 设置或检索当当前行超过指定容器的边界时是否断开转行。对应的脚本特性为wordWrap。请参阅我编写的其他
word-wrap和word-break
Daisy__xu的博客
04-20 599
在近期的项目中遇到一个小小的问题，文本太长导致自动换行，出现了好多空白区域，于是作为小白的我，百度的一下，发现了解决问题的办法。 下面我们就来探讨探讨： 1、word-wrap和word-break 1.1、css中word-wrap属性用来表明是否允许浏览器在单词中进行断句，就是俗称的换行 1.2、css的word-break用来标明该怎么样进行断句
关于 word-break 与 word-wrap
weixin_52070171的博客
02-06 259
word-break关键字值 word-break: normal; //默认换行规则 word-break: break-all; //允许非CJK(中，日，韩文)的单词换行 word-break: keep-all; //不允许CJK(中，日，韩文)的单词换行 //只允许在连字符("-")或半角空格("&ensp")处换行 word-wrap关键字值 word-wrap: normal; //默认换行规则 word-wrap: break-word; //实在没有换行点时换行 word-wr
word-wrap: break-word word-break: break-all;
weixin_30858241的博客
05-04 111
word-break: break-word;根据空格断词处理,超过换行 word-wrap: break-word;根据空格断词处理,超过换行 word-break: break-all;不根据空格断词处理，超过长度强行换行 word-break，控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all word-wrap（overfl...
CSS实现不换行/自动换行/文本超出隐藏显示省略号
最新发布
tianxianghuiwei的博客
10-17 2518
【代码】CSS实现不换行/自动换行/文本超出隐藏显示省略号。
前端大厂最新面试题-css.docx
06-06
7. 使用CSS让文本强制换行可以使用white-space: pre-wrap或word-break: break-all。 8. 为元素设置text-decoration: underline;能在文本下面添加一条红色的波浪线。 9. 使用CSS属性white-space的关键字是pre、...
多语言软件开发之new CultureInfo(“”)与CultureInfoCreateSpecificCulture(“”)的异同
学无止境
07-11 701
       在多语言资源软件制作中肯定会遇到这样的问题，如下面的代码： System.Threading.Thread.CurrentThread.CurrentCulture = new CultureInfo("zh-CHS");   .codearea{ color:black; background-color:white; line-height:18px; border:1px so
2022年Java 工程师面试题
weixin_42572320的博客
03-03 2409
第 1 页 共 485 页 目录 1、什么是 Mybatis？............................................................................... 33 2、Mybaits 的优点：............................................................................... 33 3、MyBatis 框架的缺点：.............................
Java入门基础及面试100题--初入门
loki的博客
12-15 2068
Java入门基础及面试100题 1、面向对象的特征有哪些方面？ 答：面向对象的特征主要有以下几个方面： - 抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。 - 继承：继承是从已有类得到继承信息创建新类的过程。提供继承信息的类被称为父类（超类、基类）；得到继承信息的类被称为子类（派生类）。继承让变化中的软件系统有了一定的延续性，同时继承也是封装程序中可变因素的重要手段（如果不能理解请阅读阎宏博士的《Java与
CSS3中word-break和word-wrap有什么区别？
xiaoxijinger的博客
07-09 935
大家都知道在CSS3中增加了很多新的属性，其中word-break和word-wrap就是用来给文本换行使用的，但是两者有什么区别很多小伙伴都不是很清楚。今天小千就来告诉你他们究竟有什么不同，应该用在哪里。 word-break word-break它的属性值一共有3个，其中的几个属性值的含义具体解释如下： normal:表示默认值，即默认的的换行规则。 break-all:表示强行换行，意思就是允许任意非文本间(比如网址类型的等)的单词断行。 keep-all: 也表示换行，但不允许文本中的单词换行，只能
文字换行 word-wrap word-break
秋来九月八
01-15 4277
前端渲染文字是最常见的应用场景，可有的时候，要求能够识别字符串中的换行。 后端出来的数据可能是这样的，中间有一个回车符号，要求前端能够换行显示。 如果不处理的话 是没办法识别回车符号的，无法正确显示。 对于前端来说，用css来控制是最简单的方式。 .scf-textarea-text { white-space: pre-wrap; word-wrap: break-word; word-break: break-all; } white-space 用来控制文本字符串类的空白和换行 no
每日一学—CSS3 word-wrap 属性
热门推荐
黛琳ghz的博客，期待你的关注。
05-07 1万+
word-wrap 属性是 CSS3 中的一个文本换行属性，用于指定在何处应该发生文本换行。 word-wrap 属性有两个可选值： normal：默认值。表示只在单词或连字符处换行。 break-word：表示允许在任意字符内换行，以避免当单词或字符串太长以至于无法适应其容器时出现的水平滚动条。
css属性：word-wrap:break-word; 与 word-break:break-all 的用法；
zhangq0123的博客
10-19 7254
前言：在一个长宽固定的div容器中，多行文字和英文句子都默认自动换行。不过，对于英语单词而言，会有一些微妙的变化！ //没有添加word-wrap:break-word和word-break:break-all时 I am a good boy, hahahahhahahahahahaha everyone likes me... //添加word-wrap:break
常见样式问题七、word-break、word-wrap、white-space区别
c11073138的博客
03-12 8531
首先推荐下MDN网站，在上面可以学习html、css、js。对于css而言，可以查看详细的语法、使用案例、浏览器兼容性。附上链接：https://developer.mozilla.org/zh-CN。一、基本介绍1、word-breakMDN上显示语法：normal | break-all | keep-all | break-word值：normal： 使用默认的断行规则。 break-all...
css自动换行(转载)
weixin_30627341的博客
10-10 703
自动换行 word-break:break-all和word-wrap:break-word word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于： 1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulatio...
css之word-break及word-wrap(overflow-wrap)
千霜的博客
11-03 1万+
目录 一、介绍 二、word-break 2.1、normal 2.2、break-all 2.3、keep-all 2.3、break-word 三、overflow-wrap 参考 一、介绍 今天学习markdown时，遇到了一个概念，“hard-wrapped”，然后网上搜索，发现一堆名词，如：line break、word wrapping、word wrap、line...
word-wrap与word-break的区别，以及无效情况
weixin_30632899的博客
03-07 877
两种方法的区别说明： 1，word-break:break-all例如div宽400px，它的内容就会到400px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。2，word-wrap:break-word例子与上...
word-wrap: break-word;不生效
04-01
如果在某个元素的样式中设置了word-wrap...某些旧版本的浏览器可能不支持word-wrap属性，这时可以使用word-break: break-all;来实现类似的效果。 如果以上几点都不是问题，那么可能需要检查一下其他的样式是否有影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值