CSS实现文字换行
强制不换行:div{ white-space:nowrap; }
自动换行: div{ word-wrap:break-word; word-break:normal; }
强制不换行
white-space : normal | pre | nowrap | pre-wrap | pre-line | inherit
normal ; 默认。空白会被浏览器忽略。
pre : 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap : 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap:保留空白符序列,但是正常地进行换行。
pre-line:合并空白符序列,但是保留换行符。
inherit:规定应该从父元素继承 white-space 属性的值。
设置强行换行
word-break : normal | break-all | keep-all
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
CSS实现文字换行的更多相关文章
- css控制文字换行
1.word-wrap 设置为break-word时,文本中的长单词或url可以换行 <p style="width:100px;word-wrap:break-word;border ...
- css 段落文字换行问题
项目中遇到的一个小问题,以前没有注意到: 超链接超出父级元素,想着给a标签加宽度但是没有效果... 后来发现两个很好用的css属性 1.word-wrap 用来控制换行 取值: (1)normal ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- css文字换行问题white-space:pre-line或者white-space:pre-wrap,解决word-wrap:break-word解决不了的
想让文字换行必须要写的那几个css样式就略过了.当一行文字是数字或字母时或者数字字母组合时会出现不换行局面,这时候加个word-wrap:break-word:就基本可以解决但是有种情况是它解决不了的 ...
- css 文字换行控制
强制不换行 white-space:nowrap 强制不换行,并显示省略号 word-wrap: normal; text-overflow: ellipsis; white-space: nowra ...
- 【CSS】【1】让DIV中的文字换行显示
<div style="white-space:normal;word-break:break-all;word-wrap:break-word;">data</ ...
- CSS文字换行详细解说
本文列举了兼容 IE 和 FF 地换行 CSS 推荐样式,详细介绍了word-wrap同word-break地区别.兼容 IE 和 FF 地换行 CSS 推荐样式: 最好地方式是 word-wrap: ...
- CSS 文字换行与不换行
1. 强制不换行 p{ white-space:nowrap; } 2. 自动换行 p{ word-wrap: break-word; word-break: normal; } 3. 强制英文单词断 ...
- css 文字换行
换行word-wrap: break-word 新起一行对长单词进行断句word-break:break-all 本行对长单词进行断句 不换行,强制一行white-space:nowrap table ...
随机推荐
- java历史概述
java简介Java是由Sun Microsystems公司于 1995年5月推出的Java面向对象程序设计语言(以下简称Java语言)和Java平台的总称.由James Gosling和同事们共同研 ...
- Chrome 浏览器报 filed to load resource:net err cache read failure 错误:
在IE/FF下没有该错误提示,但在Chrome下命令行出现如下错误信息: Failed to load resource: net::ERR_CACHE_MISS 该问题是Chrome浏览器开发工具的 ...
- android堆栈调试--详细
1.将ndk中的arm-linux-androideabi-addr2line可执行文件的路径加入配置文件~/.bashrc中,例如: export PATH=$PATH:~/dlna/android ...
- Pyhton编程(六)之基本数据类型-集合(补充)
集合(set) 集合其实就是一个无序的,自动去重的数据集合,它主要的作用是用来去重和进行关系测试,集合的定义方法如下: name=set("czp") /name=set({1,2 ...
- linux正确的关机方法
[root@localhost ~]# sync #数据写入磁盘 [root@localhost ~]# shutdown -h 10 #通知用户再过10分钟就关机 [root@localhost ~ ...
- Less循环
Less循环 在Less中,mixin可以调用它自身.通过这种递归调用,再结合Guard表达式和模式匹配,就可以写出各种循环结构.如,使用循环来创建一个网格类: .generate-columns(4 ...
- Android Weekly Notes Issue #285
November 26th, 2017 Android Weekly Issue #285 本周包含好几篇Kotlin的文章,如通过Property Delegate实现SharedPreferenc ...
- Python之可变类型与不可变类型
Python常见的数据类型有:数字 字符串 元组 列表 字典 不可变类型:数字 字符串 元组 可变类型: 列表 字典 a = 100 b = [100] def num1(x): x += x pri ...
- html5 实现 文件夹上传
先插个背景:最近所在项目有个小需求,就是上传文件要可以同时选择文件夹及文件,然后把文件夹内得文件及所选单文件全部选择上传,借助于搜索关键词没搜到想要的结果(相关文章貌似很好,要么就是遍历文件夹内的文件 ...
- 数据库 SQL Server2012安装步骤详解
这篇文章主要给大家讲解一下数据库SQL Server2012的安装步骤(若有雷同纯属巧合,还望谅解!) 在正式安装之前,我们需要进行两个设置: ① 首先需要关闭Windows防火墙,若不关闭,后续的安 ...