CSS3属性之text-overflow:ellipsis详解

1.语法:text-overflow:clip|ellipsis

默认值:clip;

适用于:所有元素

clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。

ellipsis:当对象内文本一处时显示省略标记(...)。

当然这还是不够的，需要加点调料才能出现效果:

那就是配合

overflow:hidden

white-space:overflow;

效果图:

代码示例请点击

2.这时候BT的产品经理来了，小鹏啊~一行省略怎么行，变成三行出现省略。

处理办法:

将white-space去除，并且加上:

display:-webkit-box;

-webkit-line-clamp: 3/*第几行裁剪*/

-webkit-box-orient:vertical;

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2-1.display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
2-2.-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
2-3.text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

效果图:

代码请点击

3.这时候测试员来了，你这IE不能正常显示(天煞IE)

如何兼容IE:使用jq插件实现。

效果图:

插件网站:http://dotdotdot.frebsite.nl/

使用方法:

CSS3属性之text-overflow:ellipsis详解相关推荐

python text函数_python可视化text()函数使用详解
python可视化text()函数使用详解这篇文章主要介绍了python可视化text()函数使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考 ...
z-index失效的几种情况，父标签position属性为relative的时候,详解
网上对这一方面解释的很多,我也不想把别人的抄过来.在这里是加上我对这些情况的理解还有我的一些疑惑,若有问题,请留言,谢谢!!!话不多说,进入正题: 文章重点:z-index失效的一类情况:父标签pos ...
html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解
这次给大家带来CSS3实现扇形动画菜单流程详解,CSS3实现扇形动画菜单的注意事项有哪些,下面就是实战案例,一起来看一下. 原文章请点击这里简化版完整实例 CSS3扇形动画菜单 *{padding: ...
传智播客html css3笔记,传智播客详解Css3九大常用属性
在Css3的学习和实际操作中,我们经常会接触到一些常用属性,比如字体.文本.列表和背景等.下面,传智播客将对常用的Css3九大属性进行详解. 1.传智播客详解Css3九大常用属性-字体 l Font- ...
Flutter 基础Widgets Text()之TextStyle详解
Text概述即一个单一样式的文本 Text Widget就是显示单一样式的文本字符串.字符串可能会跨越多行,也可能全部显示在同一行上,具体取决于布局约束. style参数可选.如果省略了,文本将使用 ...
android自定义组件属性,Android组合控件详解自定义属性
组合控件详解 & 自定义属性组合控件是自定义控件的一种,只不过它是由其他几个原生控件组合而成,故名组合控件. 在实际项目中,GUI 会遇到一些可以提取出来做成自定义控件情况. 一个自定义控件 ...
【配置属性】—Entity Framework实例详解
Entity Framework Code First的默认行为是使用一系列约定将POCO类映射到表.然而,有时候,不能也不想遵循这些约定,那就需要重写它们.重写默认约定有两种方式:Data Anno ...
php 六边形属性图能力数值图,详解基于 Canvas 手撸一个六边形能力图
一.前言六边形能力图如下,由 6 个六边形组成,每一个顶点代表其在某一方面的能力.这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图.当然,你也可以基于其他开源的 js 方案来 ...
Sublime Text 设置文件详解
Sublime Text 2是那种让人会一眼就爱上的编辑器,不仅GUI让人眼前一亮,功能更是没的说,拓展性目前来说也完全够用了,网上介绍软件的文章和推荐插件的文章也不少,而且很不错,大家可以去找找自己 ...

CSS3属性之text-overflow:ellipsis详解

CSS3属性之text-overflow:ellipsis详解相关推荐

最新文章

热门文章