这3个属性都与换行有关,看看有啥区别。

语法介绍

【word-wrap】

定义:属性允许长单词或 URL 地址换行到下一行;

语法:

word-wrap: normal|break-word;

break-word:属性允许长单词或 URL 地址换行到下一行

【word-break】

定义:属性规定自动换行的处理方法;

语法:

word-break: normal|break-all|keep-all;

break-all:允许在单词内换行。

keep-all:只能在半角空格或连字符处换行。

【white-space】

定义:属性设置如何处理元素内的空白;

语法:

white-space: normal|pre|no-wrap|pre-wrap|pre-line|inherit;

nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

(本篇博客暂时只讨论nowrap值)

区别比较

(比较word-wrap:break-word,word-break:break-all,white-space:nowrap)

(1)正常情况(不加3者中的任何一个)

分析:1)当bbbbbbbbbb在第一行无法全部显示时,会自动换到第二行显示;2)当bbbbbbbbbb在第二行无法全部显示时,单词内不会换行

(2)加属性word-wrap:break-word(属性允许长单词或 URL 地址换行到下一行)

分析:1)当bbbbbbbbbb在第一行无法全部显示时,会自动换到第二行显示;2)当bbbbbbbbbb在第二行无法全部显示时,单词内会截断换行

(3)加属性word-break:break-all(允许在单词内换行)

分析:单词内可以换行,所以在每一行都尽量填满宽度,剩余部分换行显示。

(4)white-space:nowrap(文本不会换行,直到遇到 <br>标签)

分析:这个很好区别,文本不换行,在一行显示。(这个一般结合text-overflow使用)

word-wrap,word-break,white-space的更多相关文章

  1. css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  2. css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  3. word break和word wrap

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

  4. C#操作office进行Excel图表创建,保存本地,word获取

    ,新建C#控制台应用程序(Excel创建图表) using System; using System.Collections.Generic; using System.Linq; using Sys ...

  5. 通过freemarker生成一个word,解决生成的word用wps打开有问题的问题,解决出word时中文文件名乱码问题,解决打开出word时打开的word出现问题的问题,出图片,解决动态列表

     通过freemarker制作word比较简单 步骤:制作word模板.制作方式是:将模板word保存成为xml----在xml的word模板中添加相应的标记----将xml的word文件的后缀名 ...

  6. winform显示word、ppt和pdf,用一个控件显示

    思路:都以pdf的格式展示,防止文件拷贝,所以要把word和ppt转换为pdf:展示用第三方组件O2S.Components.PDFView4NET.dll,破解版的下载链接:https://pan. ...

  7. 利用COM组件实现对WORD书签各种操作大全,看这一篇就够了

    有个需求是,程序导出一份word报告,报告中有各种各样的表格,导出时还需要插入图片. 脑海中迅速闪过好几种组件,openxml组件,com组件,npoi.为了减少程序画复杂表格,我们选用了com组件+ ...

  8. JAVAWEB使用FreeMarker利用ftl把含有图片的word模板生成word文档,然后打包成压缩包进行下载

    这是写的另一个导出word方法:https://www.cnblogs.com/pxblog/p/13072711.html 引入jar包,freemarker.jar.apache-ant-zip- ...

  9. 相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了!

    相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了! 先说图片X×dpi=点数dotX是图片实际尺寸,简单点,我们只算图片的高吧,比如说拍了张图片14 ...

  10. 测试一下Word发布刚刚发现通过Word 可以直接发Blog 感觉很新奇,先看看,如果可以呢,将发通知的改了。

      刚刚发现通过Word 可以直接发Blog 感觉很新奇,先看看,如果可以呢,将发通知的改了.   刚刚发现通过Word 可以直接发Blog 感觉很新奇,先看看,如果可以呢,将发通知的改了.     ...

随机推荐

  1. Dota2App--第三天

    一.要实现的功能 1.新特性页面 1.1.是否进入新特性界面的两种情况 1)第一次安装此APP,进入新特性界面 2)不是第一次安装,但是有版本更新,进入新特性界面 1.2.具体的代码实现 //0.版本 ...

  2. QuantLib 金融计算——随机过程之一般 Black Scholes 过程

    目录 QuantLib 金融计算--随机过程之一般 Black Scholes 过程 一般 Black Scholes 过程 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib ...

  3. SQL语句02(连表查询)

    ---恢复内容开始--- sql1992sql分类    1.笛卡尔积 (表乘表) 例:select * from emp,dept;    2.等值连接 表的连接条件使用“=” 例:select * ...

  4. HttpClient 工具类

    package com.sys.utils; import java.io.IOException; import java.net.URI; import java.util.ArrayList; ...

  5. 关于MatlabGUI清除WorkSpace的用法

    近日在调试Matlba GUI程序时,因为不想退出程序后手动Clear All来清理,又需要在过程中对WorkSpace进行清理,否则会引用之前的结果导致错误,找了很多资料,国内的论坛什么的都说用Cl ...

  6. Linux下which命令使用详解(转)

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. locate 配合数据库查看文件位置. f ...

  7. Redis-集群 - 分片

    Redis是一个基于内存的数据库,其不仅读写速度快,每秒可以执行大约110000的写操作,81000的读取操作,而且其支持存储字符串,哈希结构,链表,集合丰富的数据类型.所以得到很多开发者的青睐.加之 ...

  8. Cassandra概念学习系列之Windows里下载且安装配置Cassandra(最新的3.11.1版本)(图文详解)

    不多说,直接上干货!  最近我开始在windows环境中使用Cassandra,虽然在Cassandra站点的安装命令非常清楚和精简,我仍然在环境配置上遇到一些问题.所以我想为后来者分享下我的经验. ...

  9. Vue 中 export default 和 module.exports

    export default 服从 ES6 的规范,补充:default 其实是别名 module.exports 服从CommonJS 规范 一般导出一个属性或者对象用 export default ...

  10. nginx源码编译以及源码编译过程中遇到的问题

    本文主要讲nginx安装以及安装过程中遇到的问题. 谈到nginx 必须聊聊它的起源和发展. nginx是由俄罗斯工程师Igor Sysoev 用C语言开发的一个免费开源的Web服务器软件,于2004 ...