word-wrap,word-break,white-space
这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的更多相关文章
- css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
- css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- C#操作office进行Excel图表创建,保存本地,word获取
,新建C#控制台应用程序(Excel创建图表) using System; using System.Collections.Generic; using System.Linq; using Sys ...
- 通过freemarker生成一个word,解决生成的word用wps打开有问题的问题,解决出word时中文文件名乱码问题,解决打开出word时打开的word出现问题的问题,出图片,解决动态列表
通过freemarker制作word比较简单 步骤:制作word模板.制作方式是:将模板word保存成为xml----在xml的word模板中添加相应的标记----将xml的word文件的后缀名 ...
- winform显示word、ppt和pdf,用一个控件显示
思路:都以pdf的格式展示,防止文件拷贝,所以要把word和ppt转换为pdf:展示用第三方组件O2S.Components.PDFView4NET.dll,破解版的下载链接:https://pan. ...
- 利用COM组件实现对WORD书签各种操作大全,看这一篇就够了
有个需求是,程序导出一份word报告,报告中有各种各样的表格,导出时还需要插入图片. 脑海中迅速闪过好几种组件,openxml组件,com组件,npoi.为了减少程序画复杂表格,我们选用了com组件+ ...
- JAVAWEB使用FreeMarker利用ftl把含有图片的word模板生成word文档,然后打包成压缩包进行下载
这是写的另一个导出word方法:https://www.cnblogs.com/pxblog/p/13072711.html 引入jar包,freemarker.jar.apache-ant-zip- ...
- 相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了!
相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了! 先说图片X×dpi=点数dotX是图片实际尺寸,简单点,我们只算图片的高吧,比如说拍了张图片14 ...
- 测试一下Word发布刚刚发现通过Word 可以直接发Blog 感觉很新奇,先看看,如果可以呢,将发通知的改了。
刚刚发现通过Word 可以直接发Blog 感觉很新奇,先看看,如果可以呢,将发通知的改了. 刚刚发现通过Word 可以直接发Blog 感觉很新奇,先看看,如果可以呢,将发通知的改了. ...
随机推荐
- 通过UIColor转换为UIImage
+ (UIImage *)createImageWithColor:(UIColor *)color { CGRect rect=CGRectMake(0.0f, 0.0f, 1.0f, 1.0f); ...
- 前端知识总结--BFC
Block Formatting Context,中文直译为块级格式上下文. 1. BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...
- 常见的http错误提示
1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明100 (继续) 请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101 (切换协议 ...
- error occurred during initialization of vm
虚拟机无法进行如下分配 : -Xmx2048m -XX:MaxPermSize=512m 原因是我的老爷机总共内存只有3G: settings - > 搜索VM ->找到Compiler ...
- springcloud(八)-Hystrix熔断器
雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务消费者” ...
- 关于window.onload和body onload冲突的解决办法
在学习用js在 页面中动态显示当前时间 和依次读取公告栏信息的 实验中 发现在将两个页面整合时 window.onload=function (){}和 <body onload="d ...
- Mac下Go2Shell配合ITerm2无法定位到当前文件夹目录的解决方法
下载最新版,这个问题在最新版已经完美解决. http://zipzapmac.com/go2shell
- dotnet core webapi +vue 搭建前后端完全分离web架构(一)
架构 服务端采用 dotnet core webapi 前端采用: Vue + router +elementUI+axios 问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问.前后端可 ...
- HelloStruts2
第一个struts2项目: 前言 假 如 你 的 人 生 有 理 想,那 么 就 一 定 要 去 追,不 管 你 现 在 的 理 想 在 别 人 看 来是 多 么 的 可 笑 , 你 也 不 用 在 ...
- GitHub注册和Git安装
一.注册GitHub GitHub官方地址:https://github.com. 在浏览器中打开GitHub网址,通过首页进行注册,如下图所示. 二.安装Git Git官方下载地址:http://g ...