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所示.在此图中字符串“说点什么吧 ...
随机推荐
- Linux基础介绍【第九篇】
服务器添加3块磁盘的体系结构 [root@oldboylinux test]# free -m total used free shared buffers cached M ...
- firebug不能加载JS文件 ,无法进行JS脚本调试
提示: 本页面不包含 Javascript 如果 <script> 标签有 "type" 属性,其值应为 "text/javascript" 或者& ...
- Linux配置防火墙 开启80端口的方法
命令行输入: vi /etc/sysconfig/iptables 将 -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT ...
- [转] STM32各种时钟的区别
[原创]:http://m.oschina.net/blog/129357 我在原创的基础又从另一位博主处引用了一些内容. 时钟系统是处理器的核心,所以在学习STM32所有外设之前,认真学习时钟系统是 ...
- 简单的ViewPager了解Scroller类
View滑动是自定义ViewGroup中十分常见的一个功能.Android提供了多种View滑动的方法. layout方法 offsetLeftAndRight()与offsetTopAndBotto ...
- 自定义tabBar
★★★★自定义tabBar★★★★★★★ Demo下载地址:https://github.com/marlonxlj/tabBarCustom.git 前言: 有的时候需求要对tabBar进行自定义的 ...
- WCF学习之旅—WCF服务的批量寄宿(十三)
上接 WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一) WCF学习之旅—WCF ...
- 使用PowerShell收集多台服务器的性能计数器
写在前面 当管理多台Windows Server服务器时(无论是DB.AD.WEB以及其他的应用服务器),当出现性能或其他问题后,参阅性能计数器都是一个非常好的维度从而推测出问题可能出现的原因 ...
- html5+go+websocket简单实例代码
这次的就直接发放代码截图吧,应该是用go语言做后台一个简易的聊天,这里没用到什么特别的知识,最朴实的来实现效果,主要目的是分享下h5怎么用websocket,go搭建websocket服务的主要部分. ...
- Bootstrap相关资料
WEB项目中,使用Bootstrap较多.但是一些插件却比较确实,所以整理了一份Bootstrap相关插件的地址.基本满足日常WEB开发中插件需求.并且还挺好用的 bootstrap说明文档,有问题可 ...