常见样式问题七、word-break、word-wrap、white-space区别
常见样式问题七、word-break、word-wrap、white-space区别:https://blog.csdn.net/c11073138/article/details/79534394
首先推荐下MDN网站,在上面可以学习html、css、js。对于css而言,可以查看详细的语法、使用案例、浏览器兼容性。附上链接:https://developer.mozilla.org/zh-CN。
一、基本介绍
1、word-break
MDN上显示语法:
normal | break-all | keep-all | break-word
值:
normal:
使用默认的断行规则。
break-all:
对于non-CJK (CJK 指中文/日文/韩文) 文本,可在任意字符间断行。
keep-all:
CJK 文本不断行。 Non-CJK 文本表现同 normal。
兼容性如下图所示:keep-all的兼容性比较差一些,其他基本上主流的浏览器都能支持。
2、word-wrap
注:word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
word-wrap语法如下:
normal | break-word
值如下:
normal:
表示在正常的单词结束处换行。
break-word:
表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被被分割的单词会被强制分割换行。
3、white-space
语法如下:
normal | pre | nowrap | pre-wrap | pre-line
值如下:
normal:
连续的空白符会被合并,换行符会被当作空白符来处理。填充line盒子时,必要的话会换行。
nowrap:
和 normal 一样,连续的空白符会被合并。但换行符无效。
pre:
所有空白符都会被保留。不会自动换行,原样输出。
pre-wrap:
保留空白符序列,但是正常地进行换行。
pre-line:
合并空白符序列,但是保留换行符。
上面的换行符是指回车\r、\n、或\r\n。对于<br/>标签,不管是上面哪个属性都会换行的。
如果同时有多个空格、制表符、换行符,最终合并结果是只有一个空格。
pre和pre-wrap的区别在于pre-wrap能够自动换行;pre-wrap和pre-line的区别在于pre-line能够合并空格。
(帮助记忆:wrap在排版中一般指换行)
空格和制表符 换行符 自动换行
normal 合并 合并 换行
nowrap 合并 合并 不换行
pre 保留 保留 不换行
pre-wrap 保留 保留 换行
pre-line 合并 保留 换行
二、word-break:break-all和word-wrap:nowrap区别
前者是暴力强制换行,不管行末的单词是否显示完整,只要是非中日韩字符,就强制换行;
后者是温柔处理,如果行末没有足够空间可以放下单词,整个单词放到下一行。
html代码如下:
<style>
p {
width: 200px;
padding: 5px;
background-color: #f0f3f9;
font-size: 14px;
}
.word-break {
word-break: break-all;
}
.word-wrap {
white-space: break-word;
}
</style>
<p class="word-break">这个段落设置了word-break:break-all。</p>
<p class="word-wrap">这个段落设置了white-space:break-word。</p>
效果如下图所示:
三、word-break:keep-all和white-space:nowrap
这两个差别比较大,作用完全不一样。
word-break:keep-all会自动换行,但自动换行不会在词间换行,包括非日韩文以及日韩文。对于非日韩文来说,效果和word-break:normal是一样的。
white-space:nowrap效果是不会自动换行,除非手动添加换行标签。
<style>
p {
width: 200px;
padding: 5px;
background-color: #f0f3f9;
font-size: 14px;
}
.word-break {
word-break: normal;
}
.word-keep {
word-break: keep-all;
}
.nowrap {
white-space: nowrap;
}
</style>
<p class="word-break">这个段落设置了word-break:normal。非中日韩文词间不会断行但日韩文词间换行。</p>
<p class="word-keep">这个段落设置了word-break:keep-all。非中日韩文以及中日韩文的词间都不换行。</p>
<p class="nowrap">这个段落设置了white-space:nowrap。不管文字有多长都不会换行,除非添加换行标签<br/>。<br/>前面有个换行标签</p>
股市彻底变天了,不看你就亏大了!
---------------------
作者:c11073138
来源:CSDN
原文:https://blog.csdn.net/c11073138/article/details/79534394
版权声明:本文为博主原创文章,转载请附上博文链接!
常见样式问题七、word-break、word-wrap、white-space区别的更多相关文章
- 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 && Word Break II
1. Word Break 题目链接 题目要求: Given a string s and a dictionary of words dict, determine if s can be seg ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
随机推荐
- HTML拖放元素
实现来回拖放图片 <!DOCTYPE HTML> <html> <title>来回拖放元素</title> <meta charset=" ...
- Python之路-条件控制&循环语句&列表推导式&常用函数
一.什么是条件控制语句 条件控制语句,也可以称之为判断语句,通过一条或多条的执行结果来决定接下来要执行的代码块. 二.if语句 if语句是用来进行判断的,最简答的if语句只有一个判断一个操作. 语法: ...
- 2018-8-10-C#-TimeSpan-时间计算
title author date CreateTime categories C# TimeSpan 时间计算 lindexi 2018-08-10 19:16:51 +0800 2018-06-1 ...
- Python在线IDE | 谷歌Colaboratory云端IDE介绍
目录 1. 推荐阅读 2. 本文地址 3. 按 4. 使用篇 6. 教学篇 1. 推荐阅读 Python基础入门一文通 | Python2 与Python3及VSCode下载和安装.PyCharm破解 ...
- Python3实现文本预处理
1.数据集准备 测试数据集下载:https://github.com/Asia-Lee/Vulnerability_classify/blob/master/testdata.xls 停用词过滤表下载 ...
- 转载:CentOS yum 源的配置与使用
转载自:http://www.cnblogs.com/mchina/archive/2013/01/04/2842275.html 一.yum 简介 yum,是Yellow dog Updater, ...
- 03机器学习实战之决策树scikit-learn实现
sklearn.tree.DecisionTreeClassifier 基于 scikit-learn 的决策树分类模型 DecisionTreeClassifier 进行的分类运算 http://s ...
- Wireshark中的结果分析
Header checksum: 0x9899 [validation disabled] 因为,wireshark不自动做tcp校验和的检验.原因是因为:有时tcp校验和会由网卡计算,因此wires ...
- Swagger详解(SpringBoot+Swagger集成)(转)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ai_miracle/article/de ...
- git 日常 常用命令
初始化git git init 第一次拉代码: 方式1:git clone git clone https://git.oschina.net/*****.git (https远程仓库地址) 方式2: ...