css单行文本与多行溢出文本的省略号问题
在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理。
一。单行文本省略号
<p class="text1">
这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</p>
.text1{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
这里拿一段简单的文字示例单行文本溢出:
这里的width属性是必须的,因为需要知道它的宽度是多少,才能判断溢出;
overflow属性使为了隐藏溢出的文本;
white-space:
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
text-overflow:
值 | 描述 |
---|---|
clip | 修剪文本。 |
ellipsis | 显示省略符号来代表被修剪的文本。 |
string | 使用给定的字符串来代表被修剪的文本。 |
二。多行文本省略号
<p class="text2">
这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</p>
.text2{
height:53px;
width:100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
}
上面说过的在这里就不再多说了。
在这里height属性和overflow属性相结合是为了隐藏省略号一下的文本,大家可以试一下不加的效果,就一目了然了。
line-clamp属性是为了控制文本显示多少行。
关于display和box-orient,在这里简单说一下:
说明:必须定义display属性才可以对box进行划分。
box-orient 属性指定一个box子元素是否应按水平或垂直排列。
值 | 说明 |
---|---|
horizontal | 指定子元素在一个水平线上从左至右排列 |
vertical | 从顶部向底部垂直布置子元素 |
inline-axis | 子元素沿着内联坐标轴(映射到横向) |
block-axis | 子元素沿着块坐标轴(映射到垂直) |
inherit | box-orient 属性的值应该从父元素继承 |
如果还是不太明白,大家可以访问网址:http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/或在w3c里看css各个属性。
css单行文本与多行溢出文本的省略号问题的更多相关文章
- 多行溢出隐藏显示省略号功能的JS实现
在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...
- css控制文本单行或者多行溢出显示为省略号...
p:first-child { background-color: pink; width: 150px; line-height: 28px; font-size: 20px; overflow: ...
- CSS单行、多行文本溢出显示省略号(……)
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- css 单行和多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- html5文本超过指定行数隐藏显示省略号
这个很简单,直接贴代码就好了 HTML <span class="name">博客园是一个面向开发者的知识分享社区.自创建以来,博客园一直致力并专注于为开发者打造一个纯 ...
- css控制显示超出多少行以后开始出现省略号的写法
display: -webkit-box; display: -moz-box; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsi ...
- iOS 9应用开发教程之多行读写文本ios9文本视图
iOS 9应用开发教程之多行读写文本ios9文本视图 多行读写文本——ios9文本视图 文本视图也是输入控件,与文本框不同的是,文本视图可以让用户输入多行,如图2.23所示.在此图中字符串“说点什么吧 ...
随机推荐
- SQL字符串函数
LEN() :计算字符串长度(字符的个数.)datalength();//计算字符串所占用的字节数,不属于字符串函数.测试varchar变量与nvarchar变量存储字符串a的区别.见备注1.LOWE ...
- iOS9支付宝无法调起客户端
1.为了适配 iOS9.0 中的 App Transport Security(ATS)对 http 的限制,这里需要对 支付宝的请求地址 alipay.com 做例外,在 app 对应的 info. ...
- Linux.NET实战手记—自己动手改泥鳅(下)
在上回合中,我们不痛不痒的把小泥鳅的数据库从只能供在Windows下运行的Access数据库改为支持跨平台的MYSQL数据库,毫无营养的修改,本回合中,我们将把我们修改后得来的项目往Linux中部署. ...
- SSH隧道应用, 突破网络限制
文/怡文圣美 这篇文章可以帮你解决下面三个问题: 不能直连服务器, 要先登陆跳板机, 造成客户端工具无法连接服务器. 服务器没有公网IP, 且只允许公司IP访问, 要在家里操作要先远程桌面到工作机再登 ...
- 我为NET狂官方群福利贴:一些常用的工具:2016-08-01更新
本次更新下载:http://pan.baidu.com/s/1skXzG4H 源码文档见官方群(以下为8.1更新内容) 逆天工具 CDN 资源库 国内 http://www.bootcdn.cn/ h ...
- 06.GitHub实战系列~6.过滤器过滤掉的文件如何上传
比如我想发布一个软件版本供普通人下载: Git库建立了VS的过滤规则后 dll 和 exe 是自动过滤的,这时候我们得加参数(看图)git add xxx -f
- SQL Server-外部联接基础回顾(十三)
前言 本节我们继续讲讲联接类型中的外部联接,本节之后我们将讲述有关联接性能以及更深入的知识,简短内容,深入的理解,Always to review the basics. 外部联接 外部联接又分为左外 ...
- 从零开始编写自己的C#框架(11)——创建解决方案
这段时间一直在充电,拜读了园子中大神们的博文(wayfarer的<设计之道>.TerryLee的<.NET设计模式系列文章>.卡奴达摩的<设计模式>还有其他一些零散 ...
- MAVEN学习笔记-maven的获取和安装
windows下maven的安装步骤: 1.下载压缩包http://maven.apache.org/download.cgi选择apache-maven-3.3.9-bin.zip下载 ...
- SQL Tuning 基础概述05 - Oracle 索引类型及介绍
一.B-Tree索引 三大特点:高度较低.存储列值.结构有序 1.1利用索引特性进行优化 外键上建立索引:不但可以提升查询效率,而且可以有效避免锁的竞争(外键所在表delete记录未提交,主键所在表会 ...