html5 break word,overflow-wrap(word-wrap)、word-break和white-space的换行效果对比
之所以将word-break、overflow-wrap(word-wrap)和white-space这三个属性放在一起比较,是因为它们都有一个共同的作用,就是控制文本的换行。因为有三个,所以就容易混淆。这个三个属性有时候选任何一个都能实现我们的目标,但有时候只有某个特定的属性能实现我们的要求,这也就是我们今天要比较它们的原因,有相同点,也有不同点。
首先概况一下,overflow-wrap(word-wrap是overflow-wrap的别名,是旧名称)和word-break很相似,overflow-wrap是通用换行控制工具,而word-break是针对多字节文字的,比如中文、日文、韩文。
overflow-wrap认为单词是文本的基本单位,正常情况下换行时要保护单词的完整。overflow-wrap认为中文这样的多字节语言里单个字是文本的基本单位。换行时可以从单个字之间进行。
word-break一方面可以认为文本的基本单位是单个字(英文里是单个字符),也就忽略了英文单词的概念,任何地方都可以换行。另一方面可以认为基本单位是单词(单词以空格分割,而中文字之间没有空格,从而,中文句子,只要里面没有空格或标点等,再长的句子都当做一个‘英文单词’)。
white-space是控制文本中的空白和换行符。它可以让换行符不换行,也可以禁止在空白处换行,可以让多个连续的空白合并成一个。
下面看看这个三个属性的可选值:
/* overflow-wrap */
overflow-wrap: normal;
overflow-wrap: break-word;
/* word-break */
word-break: normal;
word-break: break-all;
word-break: keep-all;
/* white-space */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
这个三个属性的缺省值都是normal。
现在用实际例子说明。首先是什么属性都不设定,浏览器的缺省表现:
中文从单个字之间换行,英文保留单词的完整性,超出单词会溢出。
当设定为overflow-wrap: break-word;是:
英文保留单词的完整性,但超长单词会中单词中间截断换行。
当设定为word-break: break-all;是:
认为英文文本的最小单位是字符,而不是单词,换行时不保留单词的完整。中文从单个字之间换行。(请注意第一行的换行点,单词and被截断)
当设定为word-break: keep-all;是:
对于英文文本,认为最小单位是单词,换行时保留单词完整性,找空格换行。对中文来说,纯中文句子,再长的句子都不换行,除非遇到空格或非中文字符。
white-space属性的可选值比较多:
normal
连续的空白符会被合并,换行符会被当作空白符来处理。填充line盒子时,必要的话会换行。
nowrap
和 normal 一样,连续的空白符会被合并。但文本内的换行无效。
pre
连续的空白符会被保留。在遇到换行符或者
元素时才会换行。
pre-wrap
连续的空白符会被保留。在遇到换行符或者
元素,或者需要为了填充line盒子时才会换行。
pre-line
连续的空白符会被合并。在遇到换行符或者
元素,或者需要为了填充line盒子时会换行。
下面的表格总结了各种 white-sapce 值的行为:
换行符
空格和制表符
文字转行
normal
合并
合并
转行
nowrap
合并
合并
不转行
pre
保留
保留
不转行
pre-wrap
保留
保留
转行
pre-line
保留
合并
转行
一个实际例子:
html5 break word,overflow-wrap(word-wrap)、word-break和white-space的换行效果对比相关推荐
- c语言读取word文件内容,c 读取word c 读取word文档
c++如何读取word 基本步骤(1)创建)一个 MFC 的程序工程. 注意:在VC中对WORD进行操作需要在MFC AppWizard - Step 2 of4中的Automaiton选项上打上勾. ...
- c html转换成word,C#实现HTML转WORD及WORD转PDF的方法
本文实例讲述了C#实现HTML转WORD及WORD转PDF的方法.分享给大家供大家参考.具体如下: 功能:实现HTML转WORD,WORD转PDF 具体代码如下: using System; usin ...
- python word导入数据库_python读取word文档,插入mysql数据库实例
表格内容如下: 1.实现批量导入word文档,取文档标题中的数字作为编号 2.除取上面打钩的内容需要匹配出来入库入库,其他内容全部直接入库mysql # wuyanfeng # -*- coding: ...
- pdf to word android,Scanned PDF to Word
Scanned PDF to Word 介绍 Scanned PDF to Word Scanned documents are not easy to convert with regular co ...
- php利用mht导出word,解析掌握PHP导出Word文档原理
解析掌握PHP导出Word文档原理 PHP言语可能被咱们用来完成很多性能.比如在网站树立中,咱们常常会用到网页导出数据的情况.今天就为大家引见无关PHP导出Word文档的原理. 普通,有2种方法可能导 ...
- 用Word转换向导批量转换Word文档(转)
用Word转换向导批量转换Word文档(转) 目前,我校所在地区教育系统上下级之间文件材料的下达和上报都实现了网络传输.为了提高办公效率,主管教育部门要求这些材料一律使用纯文本格式.而由于排版 ...
- java 读取word 带格式_java读取word带格式_游戏下载_游戏攻略资讯_尽在搜狗爱玩
Started learning Java and think you're ready to move on to the next level? Find out if you have a go ...
- 计算机做word的表格,word表格制作,教您word如何制作表格
表格在我们的日常工作中是必不可少的,Word表格操作起来简单容易上手,不像Excel功能一大堆但非专业人士并不会用它制作表格.那么如何在Word上快速建立一个合适的表格呢?下面,小编就来大家分享wor ...
- python操作word详细操作_Python操作Word的入门教程
Python操作Word的入门教程 前言 今天来介绍下,如何用 Python 来操作 Word. 再来介绍操作 Word 之前,先来说一个最近看书学到的法则,即 3W 法则. 3W:3W分别指 Wha ...
最新文章
- MyBatis框架学习DAY_01:概念/创建运行流程
- CUDA:根据本地电脑的NVIDIA显卡驱动版本去正确匹配待安装的CUDA版本之详细攻略
- java多个mapreduce_一个简单的MapReduce示例(多个MapReduce任务处理)
- pythonrequests说明_解决Python requests 报错方法集锦
- 1405 树的距离之和
- php做游戏登录服务器,游戏登陆服务器php简单实现
- PHP语言 -- 发起流程
- 使用python对文件下的文件批量重命名
- TF-Lite极简参考-模型转换
- kafka消息堆积原因解析
- 从关系型数据库到非关系数据库
- EasyDataTransform for mac (表格数据转换)
- 解决在Word安装Mendeley失败,提示“错误429:activex部件不能创建对象“问题
- 用QQ聊天记录生成一个词云
- 兜兜转转还是回到程序员圈子
- 惠普笔记本的Windows10和Ubuntu20.04双系统安装教程
- 总结jQuery中的DOM节点属性
- 115-545-003丨Alexa Fluor 488标记亲和纯化山羊抗小鼠IgG(H+L)二抗
- Planbar 2018 新功能 BIM 加密狗更新
- Idea 控制台 繁体乱码
热门文章
- Vue3 Teleport 简介,请过目,这个是真的好用!
- 港口无人驾驶“进阶战”,这一次西井和华为牵手攻关
- 苹果手表表盘时钟与js圆周运动
- 爬虫遇到js动态渲染问题
- 更新linux centos7服务器的安全更新补丁(只更新补丁而又不更新其他组件) yum security update只更新安全补丁
- ODOO15ERP制造业产品成本核算标准逻辑图
- Java集合接口的使用(笔记)
- 什么是ATP认证,ATP认证介绍/上海理晨
- flac是什么格式?教你把flac文件转换成常用的mp3格式
- 乐视电视s50 android,乐视电视机怎么样 乐视S50电视特点介绍【详解】