CSS 实现自动换行、强制换行、强制不换行的属性
实现效果
1.自动换行:
word-wrap:break-word;
word-break:normal;
2.强制换行:
word-break:break-all; 按字符截断换行 /* 支持IE和chrome,FF不支持*/
word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */
* 注意:单词换行需要父盒子为块级元素
3.强制不换行:
white-space:nowrap;
换行属性语法
1.word-break : normal | break-all | keep-all
/*属性规定自动换行的处理方法*/
normal 使用浏览器默认的换行规则。
break-all 允许在字内换行。
keep-all 只能在半角空格或连字符处换行。
2.word-wrap : normal | break-word
/*属性允许单词或 URL 地址换行到下一行*/
normal : 允许内容顶开指定的容器边界,允许字内换行。
break-word : 内容将在边界内换行,允许单词换行。
3.white-space:normal | nowrap | pre-wrap
/*属性允许不换行*/
normal:默认。
nowrap: 文本不换行,直到遇到<br>标签为止。
pre-wrap:正常换行,保留空白符序列。
4.overflow-wrap:normal | break-word
/*设置或检索当内容超过指定容器的边界时是否断行*/
normal:允许内容顶开或溢出指定的容器边界。
break-word:内容将在边界内换行。如果需要,单词内部允许断行(也就是字内换行)。
word-break 属性和 break-word 属性值 总是混淆,终于总结了下换行的各种属性,共勉!
CSS 实现自动换行、强制换行、强制不换行的属性的更多相关文章
- CSS样式自动换行(强制换行)与强制不换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
- css样式自动换行/强制换行
写样式时遇到的英文字符超出容器问题,度娘后了解下列知识,与大家分享,同时以便自己日后回顾. 一.自动换行问题 正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大. 下面介绍的是CSS如何 ...
- 【转】css样式自动换行(强制换行)
原文链接:http://blog.csdn.net/ye987987... 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的 ...
- CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- CSS 中的强制换行和禁止换行
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- CSS - 内联元素span 强制换行失败的可能原因
在CSS中,标签span 强制换行失败:(使用display:block) 可能原因:float:left or float:right
- CSS 强制换行和禁止换行强制换行 和禁止换行样式
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. ...
- CSS - 强制换行和禁止换行强制换行 和禁止换行样
强制换行 word-break: break-all; 只对英文起作用,以字母作为换行依据. word-wrap: break-word; 只对英文起作用,以单词作为换行依据. whi ...
- 解决table不能换行的问题与CSS之自动换行总结
table不能换行问题 一般是:一行里面全是数字或是字母或者结尾有多个感叹号而导致 table不能换行,中文默认的会自动换行的,字母不能换行问题:style="table-layout:fi ...
- html中的div、td 、p 等容器内强制换行和不换行的实现
div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:< ...
随机推荐
- 前端笔记之JavaScript面向对象(二)内置构造函数&相关方法|属性|运算符&继承&面向对象
一.复习 1.1复习上下文 函数的调用方式 上下文 fun() window obj.fun() obj box.onclick = fun box setInterval(fun,1000) set ...
- Docker最全教程之使用Tencent Hub来完成CI(九)
使用Tencent Hub来完成CI 关于Tencent Hub Tencent Hub是腾讯出品的DevOps服务.主要提供多存储格式的版本管理,支持Docker Image.Binary.Helm ...
- OpenCV 初体验
个人博客原文链接 个人掘金链接 本文简单地介绍计算机图形处理的一些基本概念,以及一些有趣的例子和对应的Open CV的代码操作. 顺便说一句,恭喜IG夺冠! 一.图片存储原理 1.颜色空间RGB (1 ...
- 学JAVA第十六 天,JAVA多态
今天老师讲了多态的使用 多态是同一个行为具有多个不同表现形式或形态的能力. 多态的优点: 1. 消除类型之间的耦合关系 2. 可替换性 3. 可扩充性 4. 接口性 5. 灵活性 6. 简化性 我个 ...
- IntelliJ IDEA如何激活?
本文使用的IDEA的版本是:14.0.3 下载IDEA授权服务器(下载地址见最后),并解压,打开解压后的IntelliJIDEALicenseServer目录,可以看到如下的两个文件: Intelli ...
- 图像的膨胀与腐蚀——OpenCV与C++的具体实现
目录 1. 膨胀与腐蚀的原理 2. 膨胀的具体实现 1) OpenCV实现 2) C/C++实现 3) 验证与结果 3. 腐蚀的具体实现 1. 膨胀与腐蚀的原理 膨胀与腐蚀是数学形态学在图像处理中最基 ...
- C# 通用单例窗体类
/// <summary> /// 通用的单例制作器 /// </summary> /// <typeparam name="T"></t ...
- ElasticSearch head 插件安装
head 客户端可以很方便在上面创建索引,类型,文档,还有查询,使用它管理elasticsearch 提高效率. 在安装head 客户端之前必须安装node.js 环境,因为它是用node.js 编写 ...
- Spring AOP 整理笔记
一.AOP概念 AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. 利用AOP可以对业务逻辑的各 ...
- DataPipeline |《Apache Kafka实战》作者胡夕:Apache Kafka监控与调优
胡夕 <Apache Kafka实战>作者,北航计算机硕士毕业,现任某互金公司计算平台总监,曾就职于IBM.搜狗.微博等公司.国内活跃的Kafka代码贡献者. 前言 虽然目前Apache ...