css中word-break、word-wrap和white-space的区别 :https://baijiahao.baidu.com/s?id=1578623236521030997&wfr=spider&for=pc

在页面中遇到文本需要折行显示时,总会困惑word-break、word-wrap和white-space到底应该用哪个?三者之间又有什么区别?今天查阅资料总结了一下。

首先是white-space。它主要是用来处理元素内文本的空白符、换行符以及是否允许折行。可选值包括normal(默认)、pre、nowrap、pre-wrap、pre-line。用法如下:

whitie-space用法

其中,上图说明1中的CJK指的是中文、日文、韩文三国文字的缩写(应该包含多种亚洲文字),默认情况下,CJK文本自动换行,非CJK文本由word-wrap和word-break决定。举例如下:

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

word-wrap默认值normal,可选值break-word。

word-break默认值normal,可选值为break-all,keep-all。非CJK文本下,keep-all和normal的表现是一致的。

具体看例子( 文本为英文时 ):

上面的情况是在不加word-wrap或word-break的时候,即浏览器默认的时候,如果有一个单词很长,导致一行中剩下的空间已经放不下它时,则浏览器会把这个单词挪到下一行去。而当这个长单词特别长,一行也放不下,即它的长度超过包裹它的元素的长度时,它就会溢出它的容器。

现在给这段文字加上word-wrap:break-word。效果如下:

添加word-wrap:break-word

使用word-wrap:break-word后单词被截断了。但是,可以看到,文本的第一行留有很多空白,如果不想留有这么多空白怎么办?这时word-break就派上用场了,现在给这段文字加上word-break:break-all。效果如下:

从上面的图可以看出,使用word-wrap时,它会首先尝试将长单词挪到下一行,再看看下一行的宽度够不够,不够的话就进行单词内的断句。而word-break不会尝试把长单词挪到下一行,而是直接进行单词内的断句。

word-break中除了break-all,还有keep-all。keep-all只能在半角空格或连字符处换行。举例如下:

非CJK文本下,keep-all和normal的表现是一致的。举例如下:

总结(个人实际使用时):

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

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

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

欢迎留言交流。

css中word-break、word-wrap和white-space的区别的更多相关文章

  1. LeetCode之“动态规划”:Word Break && Word Break II

     1. Word Break 题目链接 题目要求: Given a string s and a dictionary of words dict, determine if s can be seg ...

  2. 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 ...

  3. LeetCode ||& Word Break && Word Break II(转)——动态规划

    一. Given a string s and a dictionary of words dict, determine if s can be segmented into a space-sep ...

  4. 英文单词断行问题:CSS中word-break、word-wrap以及hyphens的兼容性和区别

    CSS中一提到单词断行,最先映入脑海的肯定是word-break和word-wrap这两条属性.但对于这两条属性到底有什么区别,兼容性如何,我一直都概念模糊.今天抽空把它们以及CSS3中新加入的断行属 ...

  5. CSS中px,em,rem,pt的区别及四者换算?

    本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...

  6. js中的break,continue和return的用法及区别

    为什么要说个?好像很简单,但是我也会迷糊,不懂有时候为什么要用return,然而break和continue也经常和他放在一起. 所以就一起来说一说,这三个看起来很简单,却常常会出错的关键词的具体用法 ...

  7. leetcode@ [139/140] Word Break & Word Break II

    https://leetcode.com/problems/word-break/ Given a string s and a dictionary of words dict, determine ...

  8. css中字体单位px,pt,em,百分比之间的区别和用法

    px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素htm ...

  9. CSS 中 transform、animation、transition、translate的区别

    在前端页面的开发过程中,经常会碰到这么几个 CSS 属性容易搞混:transform.translate.animation还有transition.下面就针对这几个 CSS 属性做一个对比,辨别这几 ...

  10. CSS中一个冒号和两个冒号有什么区别

    一个冒号是伪类,两个冒号是伪元素 伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的.不存在于文档树中且表达方式也不同,所以叫伪类.伪元素所控制的内容和一 ...

随机推荐

  1. 前端开发HTML&css入门——盒子模型以及部分CSS样式

    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...

  2. vue.js(18)--父组件向子组件传值

    子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称. props数组中的 ...

  3. JSP学习(2)

    JSP学习(2) JSP简介 Java Server Page,其根本是一个简单Servlet设计. 常用的动态网站开发技术 JSP:安全性高,适合开发大型的,企业级或分布式的Web应用程序. Asp ...

  4. 银联银行卡查询服务-dubbo实现

    最近看到银联开放了一个银行卡查询的服务,具体内容见官网https://open.unionpay.com/tjweb/api/detail?apiSvcId=51 尝尝鲜 在文档下载目录下,下载upa ...

  5. C# 开发 Windows 服务 使用Log4net 组件 不能生成日志文件

    使用VS2012开发Windows服务,需要使用Log4net日志组件记录业务情况,但是始终生成不了日志文件. /// <summary> /// 入口方法 /// </summar ...

  6. tomcat日志切割脚本shell

    tomcat-rotate.sh: #!/bin/bash log_path="/home/tomcat7-api/logs/"expried_time=7 function de ...

  7. MYSQL学习笔记——连接以及存储过程

    连接 当我们需要从多个表查询数据时,我们就需要使用到连接操作,mysql支持内连接,左连接以及右连接三种连接方式. 数据库准备 首先我们创建两个表t1, t2: create table t1(i1 ...

  8. mysql的mod函数

    取余是用函数mod(numer1,number2),其返回的值为其余数值 如:mod(id,2) = 1 返回id号是奇数的id

  9. kernel32.dll提供的接口分析

    HANDLE hToken = NULL; DWORD cursessionid; HMODULE hInstKernel32 = NULL; hInstKernel32 = LoadLibrary( ...

  10. c# 如何更改 WebBrowser所加载的 HTML元素(隐藏滚动条),并按照修改后的来呈现

    如何更改 WebBrowser所加载的 HTML元素 方法1:在网页加载完毕后的事件里面添加代码,我这里只是修改网页不出现滚动条,因为滚动条我重写了. #region (private) 网页加载完成 ...