一、前言

  使得文本换行有很多方式,

  1. <br/>标签元素,能够强制使得所在位置文本换行
  2. <p>元素,<div>设定宽度,都可以对文本内容实现自适应换行
  3. 对于长单词或者链接,默认不会断开换行,方式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所表示的换行和不换行的区别的更多相关文章

  1. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  2. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  3. POI 读取word (word 2003 和 word 2007) (转)

    最近在给客户做系统的时候,用户提出需求,要能够导入 word 文件,现在 microsoft word 有好几个版本 97.2003.2007的,这三个版本存储数据的格式上都有相当大的差别,而现在 9 ...

  4. JSP利用freemarker生成基于word模板的word文档

    利用freemarker生成基于word模板的word文档 freemarker简介 FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器 ...

  5. 【jacob word】使用jacob,合并多个word为一个word文件

    将几个word文件合并到一个word文件,使用注意点: 1.后面附项目运用的jar包jacob-1.9, 2.并且jacob运用中,需要将附件内的jacob.dll放到windows/system32 ...

  6. 使用Word API打开Word文档 ASP.NET编程中常用到的27个函数集

    使用Word API(非Openxml)打开Word文档简单示例(必须安装Word) 首先需要引入参照Microsoft.Office.Interop.Word 代码示例如下: public void ...

  7. 利用模板导出文件(二)之jacob利用word模板导出word文件(Java2word)

    https://blog.csdn.net/Fishroad/article/details/47951061?locationNum=2&fps=1 先下载jacob.jar包.解压后将ja ...

  8. 生成word附件和word域动态赋值

    生成word文档和word域动态赋值,很多时候需要生成这样的word文档供下载和打印,先制作一个包含了域的 word的模板附件,放在服务器端或者字节流存入数据库,以供需要的时候代码可以获取到,如: 其 ...

  9. 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=\ ...

  10. POI 读取word (word 2003 和 word 2007)(转,好用)

    POI 读取word (word 2003 和 word 2007)(转,好用) 转做的操作: 将作者文中失效的链接的正确链接放在失效链接的下面. 最近在给客户做系统的时候,用户提出需求,要能够导入 ...

随机推荐

  1. TypeError: 'range' object doesn't support item deletion

    python 是个逐步迭代开发的过程,他不是向下兼容的,更不是向上兼容,版本不一致,好端端的程序就是不能运行了. 下面是在python 2中能运行,在Python 3中不能运行的代码.其实也很简单.但 ...

  2. java中定义的四种类加载器

    1,Bootstrap ClassLoader   启动类加载器2,ExtClassLoader   扩展类加载器3,AppClassLoader   系统类加载器4,ClassLoader   类加 ...

  3. 微信小程序实例源码大全下载

     小程序QQ交流群:131894955  小程序开发直播腾讯课堂:  https://edu.csdn.net/course/detail/6743 微信小程序实例源码大全下载 微信小应用示例代码(p ...

  4. es6新特性之箭头函数

    <script> { // es3,es5 var evens = [1, 2, 3, 4, 5]; var odds = evens.map(function (v) { return ...

  5. Python基本数据类型以及字符串

    基本数据类型                数字  int ,所有的功能,都放在int里            a1 = 123            a1 = 456                 ...

  6. Slava and tanks 877C

    C. Slava and tanks time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  7. E_FAIL (0x80004005) MachineWrap

    下载VirtualBox-4.3.12-93733-Win.exe,下载地址:http://download.virtualbox.org/virtualbox/4.3.12/

  8. 国内Maven仓库 - 2018年5月2日15:54:10

    <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...

  9. Structs复习 简单数据校验

    jar包 web.XML <?xml version="1.0" encoding="UTF-8"?> <web-app version=&q ...

  10. Android 抓取LOG的几种命令【转】

    通常调试时候需要抓取log信息,下面几种通过ADB命令来抓取log的方法: USB连接上手机,手机需要其他操作:然后运行ADB工具:输入不同的命令即可抓取对应的LOG信息. 抓取radio LOG信息 ...