css实现字母或数字强制换行
//换行
white-space:normal;
word-break:break-all;
word-wrap: break-word;
相关属性
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。 word-wrap: normal|break-word;
word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行
word-break: normal|break-all|keep-all; word-break 属性用来标明怎么样进行单词内的断句。
normal:使用浏览器默认的换行规则。
break-all:允许再单词内换行
keep-all:只能在半角空格或连字符处换行 、单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 、多行文本溢出显示省略号,WebKit浏览器或移动端的页面 overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:;-webkit-box-orient:vertical;
css实现字母或数字强制换行的更多相关文章
- CSS - 内联元素span 强制换行失败的可能原因
在CSS中,标签span 强制换行失败:(使用display:block) 可能原因:float:left or float:right
- css英文字符或者数字不换行的问题
table-layout:fixed; word-break: break-all; overflow:hidden;
- CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- CSS 中的强制换行和禁止换行
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- odoo开发笔记:前端显示强制换行
未调整之前:客户信息显示不全 调整后实现效果: 补充CSS知识: 一.强制换行 word-break: break-all; 只对英文起作用,以字母作为换行依据. word-wrap: break-w ...
- table内容强制换行
为防止文字过长而撑坏表格,一般我们需要通过css使td中内容强制换行.分别给table和td加一条样式即可实现: <meta charset="utf-8"> < ...
- CSS样式自动换行(强制换行)与强制不换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
- css文本超出部分省略号&CSS强制换行总结
word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...
- css实现强制不换行/自动换行/强制换行
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...
随机推荐
- 使用RAS+AES对接口数据加解密
在实际开发中,会遇到两个系统之间传输数据,为了对传输的数据进行保护,需要发送方对接口数据进行加密,接收方对数据解密. 对数据加密,采用RSA+AES双重加密,是数据更加安全. 使用前提: 如果客户端本 ...
- class1and2_tkinter之 Label & Button 标签和按钮
''' # ------------------------------------------------------------ # # 1. 使用tkinter设置一个标签 # # # 设计tk ...
- Ehcache3.x学习(二)分层的选项
Ehcache支持分层缓存的概念. 当想缓存堆内存以外的空间时,会发生下面的事情: 1.将数据添加到缓存意味着必须序列化key和value. 2.从缓存中读取数据意味着可能必须反序列化key和valu ...
- jpa简单规则(转https://www.cnblogs.com/rulian/p/6434631.html)
一.常用规则速查 1 And 并且2 Or 或3 Is,Equals 等于4 Between 两者之间5 LessThan 小于6 LessThanEqual 小于等于7 Gre ...
- 大道浮屠诀---cwRsync同步工具的使用
目的: 在日常生活中,我们有时候会遇到这样类似的问题 ---需要把一台服务器上的某个重要的文件进行备份(拷贝另外的服务器上) ---需要同步系统上的配置文件到其他系统 利用此cwRsync软件可以解决 ...
- Petrozavodsk Summer-2016. Warsaw U Contest, XVI Open Cup Onsite.
Petrozavodsk Summer-2016. Warsaw U Contest, XVI Open Cup Onsite. Problem A. Gambling Problem B. Colo ...
- POJ Evacuation /// 二分图最大匹配
题目大意: 在一个n*m的房间中 ‘X’为墙 ‘D’为门 ‘.’为人 门只存在与外围 人每秒钟只能向四连通区域走一步 门比较狭窄 每秒钟只能通过一个人 求所有人逃脱的最短时间 如果不可能则输出impo ...
- python接口自动化(get请求)
python接口自动化(get请求) get请求的目的:查询资源 一.导包 二.请求的URL 三.请求的参数 四.获取请求的URL 五.获取响应的状态码 六.获取响应的本文信息 #导包 import ...
- Nginx常用功能配置一
Nginx常用功能配置 参数include配置 说明:如果日常工作中server标签存在太多,可以采用include配置模式,Nginx的主配置文件包含的所有虚拟主机的子配置文件会统一放入extra目 ...
- swt java 内嵌ActiveX控件
这里用的是SWT/JFace开发application中SWT自带的org.eclipse.swt.ole.win32 包可以支持内嵌OLE和ActiveX. 具体用法如下: //创建一个OleFra ...