CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...

对于text-overflow:ellipsis,文本超出部分显示...,但要实现这个效果,却有一些必备条件,如下:

div{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  /*其他属性*/
}

三个条件缺一不可,但是这些属性只能实现一行文本显示...,而对于要显示多行文本,并且只有最后一行显示...,就不适用了,所以需要修改样式,如下:

div{
  overflow: hidden;
   text-overflow: ellipsis;
   height: 60px;
   display: -webkit-box;
   -webkit-line-clamp: 3; /*可指定任一行显示...效果*/
  -webkit-box-orient: vertical;
  /*此时不需要white-space:nowrap;*/
}

看到新增的属性,应该就知道,他不是通用的,只针对webkit内核浏览器,而对于最TM神奇的IE浏览器,只能使用插件了,jq插件地址:http://dotdotdot.frebsite.nl/,使用方法,如下:

时间: 2024-10-26 03:54:36

CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...的相关文章

让script的type属性等于text/html

type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate" type="text/html"> <li> <div class="photo"> <a href="#"> <img src="[UserImg]" style="

CSS3实现的div元素水平运动指定距离

CSS3实现的div元素水平运动指定距离:本章节分享一段,它实现了利用CSS3让div元素水平运动一段距离.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</

CSS3 属性组参考资料

CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby 语音 表格 文本 2D/3D 转换 过渡 用户界面 "CSS" 列指示该属性是在哪个 CSS 版本(CSS1.CSS2 或 CSS3)中定义的. CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,

CSS3属性的兼容 什么是弹性和布局

CSS3新特性,兼容性,兼容方法总结 css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?<length>:用长度值设置对象的圆角半径长度.不允许负值<percentage>:用百分比设置对象的圆角半径长度.不允许负值 实例: bo

如何用javascript获取和设置css3属性

==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); console.log(test.style); 然而这种方法并没有什么效果,因为style代表的是行间样式. 我突然想起以前学JS运动,有一个叫做getStyle的方法 function getStyle(obj, name){ if(obj.currentStyle){ return obj.cu

CSS3属性选择器详解

上一章在<CSS3基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种: E[attr]:只使用属性名,但没有确定任何属性值: E[attr="

CSS2与CSS3属性

CSS2 CSS 背景属性(Background) background在一个声明中设置所有的背景属性. background-attachment设置背景图像是否固定或者随着页面的其余部分滚动. background-color设置元素的背景颜色. background-image设置元素的背景图像. background-position设置背景图像的开始位置. background-repeat设置是否及如何重复背景图像. CSS 边框属性(Border 和 Outline) border

CSS3属性text-overflow(省略符)实战开发详解

先看一下效果: 好了,看完了效果,现在正式开始今天的开发旅程吧! 首先我们先创建html页面,代码如下所示(红色文字即是我们Demo的主要内容): <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=”styles.css”> <title>text-overflow 实例详解</title> </head&

CSS3属性——(二)

盒模型 1)盒的基本类型 在CSS3中使用display属性来定义盒的类型,总体来说盒分为block类型和inline类型 比如之前我们所学div元素就属于block类型,span和a属于inline类型. 2)inline-block类型 inline-block类型是CSS2.1中追加的一个盒类型.inline-block类型盒属于block盒的一种,但是在显示时具有inline类型盒的特点. 3)使用inline-block类型来执行分列显示 在CSS2.1之前,若需要在一行中并列显示多个