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.强制不换行,同时以省略号结尾. 代码如下:< ...
随机推荐
- 面试官: 说说看, 什么是 Hook (钩子) 线程以及应用场景?
文章首发自个人微信号: 小哈学Java 个人网站地址: https://www.exception.site/java-concurrency/java-concurrency-hook-thread ...
- 从零开始学习PYTHON3讲义(十)自己做一个“电子记事本”
<从零开始PYTHON3>第十讲 截至上一讲,我们已经完成了Python语言的基本部分.我们用了三讲来讨论Python语言的控制结构,用了两讲来介绍Python的基本数据类型.可以说仅就语 ...
- MongoDB学习笔记~地图坐标的支持与附近点的查找
回到目录 Mongodb这个数据库很不错,它的方法也不错,为了实现坐标功能,它甚至为我们提供了geo里的一些算法,帮助我们通过某个点去位置和查找N个附近的点. 表面 在您存储地理数据和编写查询条件前, ...
- java编程行业微信群,无论新手老手欢迎加入,会一直更新
纯技术交流群 每日推荐 - 技术干货推送 跟着泥瓦匠,一起问答交流 扫一扫,我邀请你入群 纯技术交流群 每日推荐 - 技术干货推送 跟着泥瓦匠,一起问答交流 扫一扫,我邀请你入群
- WCF优雅使用 KnownType标记的方法
[KnownType("DerivedTypes")] [DataContract] public abstract class TaskBase { // other class ...
- jquery中的$.fn的用法
JQuery里的原型prototype分析 http://www.nowamagic.net/librarys/veda/detail/653 jquery中的$.fn的用法 ...
- Jquery简单学习
Jquery是一个JavaScript的函数库,Jquery是一个写得少但做的多的轻量级JavaScript库 Jquery用美元$定义. Jquery的action执行对元素的操作 文档就绪函数: ...
- 调用链监控 CAT 之 入门
简介 CAT 是一个实时和接近全量的监控系统,它侧重于对Java应用的监控,基本接入了美团上海所有核心应用.目前在中间件(MVC.RPC.数据库.缓存等)框架中得到广泛应用,为美团各业务线提供系统的性 ...
- SpringBoot学习笔记(一)入门
1.重新认识Spring 假如临危受命需要开发一个简单的基于Spring的web程序,你该做什么?可能想到一些基本的需要: 项目结构,其中可选择使用Maven或Gradle构建.其中包含例如Sprin ...
- vue学习记录③(路由)
上篇文章我们用vue-cli脚手架工具做了个简单的hello world页面,但是我们破坏了原来的流程,而正常的访问页面应该是通过路由来实现的. 那么什么是路由呢? 路由就是通过不同的url来访问不同 ...