css强制换行和超出部分隐藏实现
一、强制换行
1 word-break: break-all; 只对英文起作用,以字母作为换行依据。
2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据。
3 white-space: pre-wrap; 只对中文起作用,强制换行。
word-break:break-all 和 word-wrap:break-word
都是能使其容器如DIV的内容自动换行,它们的区别在于:
1、word-break:break-all
假设div宽度为450px,它的内容就会到450px自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。
显示效果:
2、word-wrap:break-word
例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。
显示效果:(就会在div设定的padding内进行填充满,然后切换到下一行)
二、禁止换行
white-space:nowrap 是禁止换行。
overflow:hidden 是让多出的内容隐藏起来,否则多出的内容会撑破容器。
text-overflow:ellipsis 让多出的内容以省略号…来表达。(但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。)
css强制换行和超出部分隐藏实现的更多相关文章
- css强制换行和超出隐藏实现
一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...
- css文本超出部分省略号&CSS强制换行总结
word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...
- CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- CSS强制换行和禁止换行代码
一.强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- CSS 强制换行和禁止换行强制换行 和禁止换行样式
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. ...
- CSS - 强制换行和禁止换行强制换行 和禁止换行样
强制换行 word-break: break-all; 只对英文起作用,以字母作为换行依据. word-wrap: break-word; 只对英文起作用,以单词作为换行依据. whi ...
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
- css 强制换行
强制不换行 div{white-space:nowrap;} 自动换行div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行div{wor ...
- css 一行内显示 超出自动隐藏
一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com].text-overflow {display:block;/*内联对象需加*/width:31 ...
随机推荐
- CONNECT_BY_ROOT
1.select * from EMP t where t.deptno = 10; EMPNO ENAME JOB MGR HIREDATE SAL ...
- 一张图理解"Figure", "Axes", "Axis"
Figure is the object with the highest level in the hierarchy. It corresponds to the entire graphical ...
- vim编辑器的使用技巧——忽略字母大小写
一忽略字母大小写临时生效 底行模式 底行模式下输入set ic 注意ic是ignorecase的缩写 命令模式 命令模式进行关键字搜索 二忽略字母大小写永久生效 保存到配置文件里面,默认是没有此配置 ...
- php ucwords()函数 语法
php ucwords()函数 语法 作用:把每个单词的首字符转换为大写 语法:ucwords(string) 参数: 参数 描述 string 必须,规定要转换的字符串 说明:把字符串中每个单词的首 ...
- PHP curl_copy_handle函数
curl_copy_handle — 复制一个cURL句柄和它的所有选项 说明 resource curl_copy_handle ( resource $ch ) 复制一个cURL句柄并保持相同的选 ...
- LVS负载均衡中arp_ignore和arp_annonuce参数配置
先简单的介绍下关于LVS负载均衡 LVS(Linux Virtual Server)Linux服务器集群系统 针对高可伸缩,高可用服务的需求,给予IP层和内容请求分发的负载均衡调度解决方法,并在Li ...
- centos 7 安装 redis 及 php-redis 拓展
===============redis 安装========================== 直接yum 安装的redis 不是最新版本 yum install redis 如果要安装最新的re ...
- appium常见问题05_修改Android手机运行环境(adb指令修改hosts)
自动化测试过程中,手机有时会跳网,怎样保持手机测试的环境稳定性,可以通过adb指令修改android手机hosts,保持手机运行在hosts中配置的环境中: 修改方法如下: 前提条件:已安装andro ...
- 2019.7.26 NOIP 模拟赛
这次模拟赛真的,,卡常赛. The solution of T1: std是打表,,考场上sb想自己改进匈牙利然后wei了(好像匈牙利是错的. 大力剪枝搜索.代码不放了. 这是什么神仙D1T1,爆蛋T ...
- lua string.byte怎么判断是中文还是别的
string.byte(char)>127是中文,string.sub(s,i,i+2),占两个字节,中文 string.byte(char)<=127是普通字符,咱一个字节