word-break|overflow-wrap|word-wrap——CSS英文断句浅析
---恢复内容开始---
word-break|overflow-wrap|word-wrap——CSS英文断句浅析
一 问题引入
今天在再次学习 overflow 属性的时候,查看效果时,看到如下结果,内容在 div 中国换行了,可是两个 P 元素的内容并没有换行,搜索一番没有找到系统的答案,截图到群里请教大神,才知道是英文断句的问题,但是还是不太明白。之前没有遇到这种情况,为了彻底搞清楚,英文断句,又开始学习英文断句到底是怎么回事。
二 换行
每种语言里都有换行,就中文而言,我们最小语言单位是字,字组成词语,在词语换行,不会影响词义,英文的最小语言单位应该是单词,而单词是用字母组成的,字母可拆分,也就是能在单词内换行,而拆分后可能影响单词的意思或者产生歧义,抑或是阅读体验不佳,这是英文换行和中文换行的差异。为了不让阅读者产生歧义,中文换行和平时用中文写作类型,在标点符号的末尾换行,就是标点符号不能在开头,词语可以换行,标点符号通常就是中文句子的断点。
对于内容自适应的盒子,也就是宽度用内容决定的盒子,不存在换行导致歧义的问题,比如浮动盒子。对于固定宽度或者自适应容器的盒子,存在换行导致歧义的问题。
① word-break:normal|keep-all|break-all| (默认为 normal ,还有两个值,用的很少,就不写了)
mdn 解释和翻译:
The
word-break
CSS property is used to specify whether to break lines within words. word-break 属性是用于说明师是否在单词内换行。Applies to all elements
Inherited Yes
normal: Use the default line break rule.
keep-all:Don’t allow word breaks for CJK text, Non-CJK text behavior is the same as for nomal. 不许在中文、日语、韩语单字内换行,非CJK文本和 normal 相同。
break-all:Word breaks may be inserted between and chararcter for non-CJK(Chinese/Japanese/Korean). 可以在非CJK单字内换行。
中文换行是和我们写作一样的规则,我们主要来看书英语和数字,这三者的区别。把一串数字看成一个整体,造了一个不存在的单词 lon.....ng。
实例
HTML
<div id="outbox">
<div class="innerbox">
<h6>word-break:normal</h6>
<p class="p1 "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
<div class="innerbox">
<h6>word-break:keep-all</h6>
<p class="p2 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
<div class="innerbox">
<h6>word-break:break-all</h6>
<p class="p3 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
</div>
CSS:
大家共用的 outbox 和 所有p元素:
#outbox {
width: 160px; //外层盒子指定宽度,内部盒子可以适应外部盒子的宽度
border: 1px solid green;
} p {
font-size: 16px;
border: 2px solid red;
padding: 5px;
background: #f29705;
}
p1,p2, p3 的样式:
.p1 {
word-break: normal;
} .p2 {
word-break: keep-all;
} .p3 {
word-break: break-all;
}
效果图:
观察各个属性值得表现,可以看到 word-break 的各种值得区别。
word-break:normal——按照一般的断点断句,可能溢出;
word-break:break-all——content-edge处断句,单词可能被破坏,不会溢出;
word-break:keep-all——断点断句,可能溢出,表现和 word-break:normal 相同。
② overflow-wrap:normal | break-word
MDN 的解释和我的翻译:
The
overflow
-wrap
property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box. overflow-wrap 属性是用来说明当一个不可截断的字符串太长而不能被包含在盒子中时,是否在单词内换行以阻止单词溢出。也就是当一个单词的长度比包含它的盒子还要宽,用这个属性能在这个单词内换行以达到不溢出的效果。Applies to all elements
Inherited yes
normal: Indicates that lines may only break at normal word break points. 声明只能在单词的断点换行。
break-word: Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line. 声明如果没有可断点处,则可以在单词的任何处换行。(不好理解好)
例子:
pa pb 的html:
<div id="outbox">
<div class="point ">
<h4>overflow-wrap:normal</h4>
<p class="pa "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
<div class="point ">
<h4>overflow-wrap:break-word</h4>
<p class="pb ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
</div>
CSS:
.pa {
overflow-wrap: normal;
} .pb {
overflow-wrap: break-word;
}
效果:
ADAD
观察效果图,可以看出两者的区别:
overflow-wrap:normal——断点断句,单词不被破坏,可能溢出;
overflow-wrap:break-word——先断点,单词过长再在末尾断句,单词可能被破坏,不会溢出。
③ word-wrap: normal | break-word
MDN 的描述和翻译:
HTML:
<div id ="outbox">
<div class="point ">
<h4>word-wrap:normal</h4>
<p class="pA "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
<div class="point ">
<h4>word-wrap:break-word</h4>
<p class="pB "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
</div>
pA pB的CSS:
.pA {
word-wrap: normal;
} .pB {
word-wrap: break-word;
}
效果图:
观察效果图,可以看出两者的区别:
word-wrap规定如何断句,
word-wrap:normal——只是断点断句,单词过长就可能溢出;
word-wrap: break-word——先断点断句,单词过长,一行放不下,再在任末尾断句,单词可能被破坏,不会溢出。
---恢复内容结束---
word-break|overflow-wrap|word-wrap——CSS英文断句浅析的更多相关文章
- leetcode 139. Word Break 、140. Word Break II
139. Word Break 字符串能否通过划分成词典中的一个或多个单词. 使用动态规划,dp[i]表示当前以第i个位置(在字符串中实际上是i-1)结尾的字符串能否划分成词典中的单词. j表示的是以 ...
- 139. Word Break 以及 140.Word Break II
139. Word Break Given a non-empty string s and a dictionary wordDict containing a list of non-empty ...
- CSS 温故而知新 断句失败
设置了一定的宽度和高度.但无论是下面哪句都无效. word-break: break-word; word-wrap: break-word; 原因竟然是因为 /* white-space: nowr ...
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- [LeetCode] Word Break II 拆分词句之二
Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...
- 【leetcode】Word Break II
Word Break II Given a string s and a dictionary of words dict, add spaces in s to construct a senten ...
- 17. Word Break && Word Break II
Word Break Given a string s and a dictionary of words dict, determine if s can be segmented into a s ...
- LeetCode:Word Break II(DP)
题目地址:请戳我 这一题在leetcode前面一道题word break 的基础上用数组保存前驱路径,然后在前驱路径上用DFS可以构造所有解.但是要注意的是动态规划中要去掉前一道题的一些约束条件(具体 ...
- LeetCode Word Break II
原题链接在这里:https://leetcode.com/problems/word-break-ii/ 题目: Given a string s and a dictionary of words ...
随机推荐
- Eclipse 安装 SVN 的在线插件
这是继上次svn 客户端与服务器安装后的如何在Eclipse 环境下在线安装 SVN插件,我的Eclipse版本是4.50 SVN的在线安装 下面为大家提供SVN 的在线安装教程.下面是安装的 详细过 ...
- 代码的坏味道(12)——平行继承体系(Parallel Inheritance Hierarchies)
坏味道--平行继承体系(Parallel Inheritance Hierarchies) 平行继承体系(Parallel Inheritance Hierarchies) 其实是 霰弹式修改(Sho ...
- JDK环境变量配置说明
摘要:被人问到,为什么要配置Path/ClassPath JAVA_HOME,突然感觉有些讲不清楚."新人有资格问一个怪问题,但是老鸟不能给一个烂回答".所以今天为了让自己进一步学 ...
- Oracle 内置sql函数大全
F.1字符函数--返回字符值 这些函数全都接收的是字符族类型的参数(CHR除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据 ...
- 使用STM32F4的CCM内存
使用STM32F4的CCM内存http://www.stmcu.org/module/forum/forum.php?mod=viewthread&tid=604814&fromuid ...
- C# - 计时器Timer
System.Timers.Timer 服务器计时器,允许指定在应用程序中引发事件的重复时间间隔. using System.Timers: // 在应用程序中生成定期事件 public class ...
- 灾难 bzoj 2815
灾难(1s 128MB)catas [样例输入] 5 0 1 0 1 0 2 3 0 2 0 [样例输出] 4 1 0 0 0 题解: 主要算法:拓扑排序:最近公共祖先(Lca): 先跑出拓扑序 我们 ...
- 《分布式事务解决之道》沙龙ppt共享
大型分布式系统往往由很多“微服务”组成,而不同的微服务往往又连接着不同的数据库,在看似常用的功能背后,可能又需要横跨不同的“微服务”和“数据库”才能实现.那么如何才能保证系统事务的一致性呢?这也同时是 ...
- BranchCache在sharepoint2013使用
BranchCache 是 Windows 7.Windows 8.Windows Server 2008 R2 和 Windows Server 2012 操作系统的一项功能,此功能可在本地分支机构 ...
- O365(世纪互联)SharePoint 之调查列表简单介绍
前言 SharePoint中为了提供了很多开箱即用的应用程序,比如调查列表就是其中之一,同样,在O365版本里(国际版和世纪互联版本均可),也有这样的调查列表可以供我们使用,而使用起来非常方便和快速, ...