white-space和word-wrap和word-break所表示的换行和不换行的区别
一、前言
使得文本换行有很多方式,
- <br/>标签元素,能够强制使得所在位置文本换行
- <p>元素,<div>设定宽度,都可以对文本内容实现自适应换行
- 对于长单词或者链接,默认不会断开换行,方式2就不能够在其这些文本内部进行换行了,
这时就需要word-wrap : break-word ;或者word-break:break-all;实现强制断行
二、正文
1. 强制不换行
div{
white-space:nowrap;
}
/*
white-space:normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
*/
2. 控制文本换行
div{
word-break: normal;
word-break: break-all;
word-break: keep-all;
}
/*
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
*/
3. 强制单词内或链接内断行
div{
word-wrap: break-word;
}
/*
word-wrap 属性用来标明是否允许浏览器在长单词和链接内进行断句
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行
*/
详细介绍:
(一)white-space 属性设置如何处理元素内的空白
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
- normal默认。空白会被浏览器忽略。
- pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
- nowrap文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。
- pre-wrap 保留空白符序列,但是正常地进行换行。
- pre-line 合并空白符序列,但是保留换行符。
- inherit 规定应该从父元素继承 white-space 属性的值。
(二)word-wrap 属性用来标明是否允许浏览器在单词内进行断句
word-wrap: normal|break-word;
word-wrap 属性用来标明是否允许浏览器在单词内进行断句
- normal: 只在允许的断字点换行(浏览器保持默认处理)
- break-word:在长单词或URL地址内部进行换行,
/*内容将在边界内换行。如果需要,单词内部允许断行。*/
(三)word-break 属性用来标明怎么样进行单词内的断句
word-break: normal|break-all|keep-all;
- normal:使用浏览器默认的换行规则。
- break-all:允许在单词内换行 , 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
- keep-all:只能在半角空格或连字符处换行,
不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。
三、结语
https://www.cnblogs.com/yingzi1028/p/6113066.html
word-break: break-all;、word-break: keep-all; 、word-wrap: break-word;和white-space:nowrap;都有什么作用
white-space和word-wrap和word-break所表示的换行和不换行的区别的更多相关文章
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- POI 读取word (word 2003 和 word 2007) (转)
最近在给客户做系统的时候,用户提出需求,要能够导入 word 文件,现在 microsoft word 有好几个版本 97.2003.2007的,这三个版本存储数据的格式上都有相当大的差别,而现在 9 ...
- JSP利用freemarker生成基于word模板的word文档
利用freemarker生成基于word模板的word文档 freemarker简介 FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器 ...
- 【jacob word】使用jacob,合并多个word为一个word文件
将几个word文件合并到一个word文件,使用注意点: 1.后面附项目运用的jar包jacob-1.9, 2.并且jacob运用中,需要将附件内的jacob.dll放到windows/system32 ...
- 使用Word API打开Word文档 ASP.NET编程中常用到的27个函数集
使用Word API(非Openxml)打开Word文档简单示例(必须安装Word) 首先需要引入参照Microsoft.Office.Interop.Word 代码示例如下: public void ...
- 利用模板导出文件(二)之jacob利用word模板导出word文件(Java2word)
https://blog.csdn.net/Fishroad/article/details/47951061?locationNum=2&fps=1 先下载jacob.jar包.解压后将ja ...
- 生成word附件和word域动态赋值
生成word文档和word域动态赋值,很多时候需要生成这样的word文档供下载和打印,先制作一个包含了域的 word的模板附件,放在服务器端或者字节流存入数据库,以供需要的时候代码可以获取到,如: 其 ...
- dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.
采用dom4j方式解析string类型的xml xml: String string="<?xmlversion=\"1.0\" encoding=\ ...
- POI 读取word (word 2003 和 word 2007)(转,好用)
POI 读取word (word 2003 和 word 2007)(转,好用) 转做的操作: 将作者文中失效的链接的正确链接放在失效链接的下面. 最近在给客户做系统的时候,用户提出需求,要能够导入 ...
随机推荐
- TypeError: 'range' object doesn't support item deletion
python 是个逐步迭代开发的过程,他不是向下兼容的,更不是向上兼容,版本不一致,好端端的程序就是不能运行了. 下面是在python 2中能运行,在Python 3中不能运行的代码.其实也很简单.但 ...
- java中定义的四种类加载器
1,Bootstrap ClassLoader 启动类加载器2,ExtClassLoader 扩展类加载器3,AppClassLoader 系统类加载器4,ClassLoader 类加 ...
- 微信小程序实例源码大全下载
小程序QQ交流群:131894955 小程序开发直播腾讯课堂: https://edu.csdn.net/course/detail/6743 微信小程序实例源码大全下载 微信小应用示例代码(p ...
- es6新特性之箭头函数
<script> { // es3,es5 var evens = [1, 2, 3, 4, 5]; var odds = evens.map(function (v) { return ...
- Python基本数据类型以及字符串
基本数据类型 数字 int ,所有的功能,都放在int里 a1 = 123 a1 = 456 ...
- Slava and tanks 877C
C. Slava and tanks time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- E_FAIL (0x80004005) MachineWrap
下载VirtualBox-4.3.12-93733-Win.exe,下载地址:http://download.virtualbox.org/virtualbox/4.3.12/
- 国内Maven仓库 - 2018年5月2日15:54:10
<mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...
- Structs复习 简单数据校验
jar包 web.XML <?xml version="1.0" encoding="UTF-8"?> <web-app version=&q ...
- Android 抓取LOG的几种命令【转】
通常调试时候需要抓取log信息,下面几种通过ADB命令来抓取log的方法: USB连接上手机,手机需要其他操作:然后运行ADB工具:输入不同的命令即可抓取对应的LOG信息. 抓取radio LOG信息 ...