css控制单行文本溢出
1、溢出属性(容器的)
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值,内容不会被修剪,会成现在元素框之外;
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;
inherit:规定应该从父元素继承overflow属性的值。
2、空余空间
white-space:normal/pre/nowrap/pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白;
normal:默认值,空白会被浏览器忽略,
pre:空白会被浏览器保留,其行为方式类似HTML中的pre标签;
nowrap:文本不会换行,文本会在同一行上继续,直到遇到<br/>标签为止;
pre-wrap:保留空白符序列,但是正常的进行换行;
pre-line:合并空白符序列,但是保留换行符;
inherit:规定应该从父元素继承White-space属性的值;(ie浏览器不支持此属性值)
3、文本溢出:text-overflow:clip/ellipsis
取值:
clip:不显示省略号(...),而是简单的裁切;
ellipsis:当对象内文本溢出时,显示省略标记;
说明:
text-overflow属性仅是...,当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:
1、容器宽度:width:value;
2、强制文本在一行内显示:white-space:nowrap;
3、溢出内容为隐藏:overflow:hidden;
4、溢出文本显示省略号:text-overflow:ellipsis;
多行文本溢出:
//多行 .multiple-line{ width:200px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
注意:由于使用的是WebKit的CSS扩展属性,所以该方法只适用于WebKit浏览器及移动端;
> >
< <
css控制单行文本溢出的更多相关文章
- CSS实现单行文本溢出显示省略号
p { width:100px;//设定宽度 //以下三个属性设置均必不可少 white-space: nowrap; text-overflow:ellipsis; overflow:hidden; ...
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- css实现超出文本溢出用省略号代替
一.单行 实现单行文本的溢出显示省略号使用text-overflow:ellipsis属性,但需要配合使用另外两个属性使用才能达到效果. 如下: overflow:hidden; text-overf ...
- 小技巧!CSS 整块文本溢出省略特性探究
今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节. 文本超长打点 我们都知道,到今天(2020/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略. 对于单行文本,使用 ...
- css 之单行文本显示省略和多行文本省略
一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...
- css控制单行或者多行文本超出显示省略号
1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表 ...
- CSS3控制单行文本的溢出
text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出.语法: 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义 ...
- css限制单行文本输入,超出部分使用...替换
在实际应用中,经常需要只显示一行文字,不允许文字换行破坏整体样式的情况.例如'商品的名称','简介'等等.但是由于显示器的宽度不一样,会出现后台所给文字内容,一行文本容纳不下的情况.溢出的文本如果使用 ...
随机推荐
- 【数论】数论进阶-Preknowledge
数论进阶-Preknowledge 参考资料:洛谷网校2018夏季省选基础班SX-3数论进阶课程及课件 一.整除与取整除法 1.1 定义 1.整除 \(\forall~x,y~\in~Z^+,\) 若 ...
- angular 使用rxjs 监听同级兄弟组件数据变化
angular 的官网给出了父子组件之间数据交互的方法,如ViewChild.EventEmitter 但是如果要在同级组件之间进行数据同步,似乎并没有给出太多的信息. 有时候我们想,在一个组件中修改 ...
- 问题分析 - 电容的ESR
ESR,是Equivalent Series Resistance三个单词的缩写,翻译过来就是“等效串连电阻” 理论上,一个完美的电容,自身不会产生任何能量损失,但是实际上,因为制造电容的材料有电阻, ...
- oracle分析函数 (转)
一.总体介绍 12.1 分析函数如何工作 语法 FUNCTION_NAME(<参数>,…) OVER (<PARTITION BY 表达式,…> <ORDER BY 表达 ...
- Codeforces 221 B. Little Elephant and Numbers
B. Little Elephant and Numbers time limit per test 2 seconds memory limit per test 256 megabytes inp ...
- C11线程管理:异步操作
1.异步操作 C++11提供了异步操作相关的类,std::future.std::promise和std::package_task.std::future作为异步结果的传输通道,方便的获取线程函数的 ...
- HttpClient 模拟登陆知乎
最近做爬虫相关工作,我们平时用HttpWebRequest 比较多,每一个Url都要创建一个HttpWebRequest实例, 而且有些网站验证比较复杂,在登陆及后续抓取数据的时候,每次请求需要把上次 ...
- bzoj 2213: [Poi2011]Difference
Description A word consisting of lower-case letters of the English alphabet ('a'-'z') is given. We w ...
- 查询PHP版本
查询php版本: phpinfo();
- mysql数据库 批量替换 某字段中的数据
当数据库出现这种情况: 表名:area id name 1 太仓 2 太仓市 3 太仓市 ... ... 我需要把 name字段中 的太仓市 的“市“去掉 可以使用: update `area` ...