单行文本

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出显示省略号

<style type="text/css" media="screen">
p {
width: 300px;
height: 72px;
line-height: 36px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
} </style> <p>
CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号CSS 单行 多行文本溢出显示省略号
</p>

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  1. -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

例如:

p {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
} p:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

效果如图:

适用范围:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

  1. 将height设置为line-height的整数倍,防止超出的文字露出。
  2. 给p:after添加渐变背景可避免文字只显示一半。
  3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);

CSS 单行 多行文本溢出显示省略号的更多相关文章

  1. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  2. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  3. css实现多行文本溢出显示省略号(…)

    WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...

  4. CSS实现单行、多行文本溢出显示省略号(…)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  5. CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  6. CSS单行、多行文本溢出显示省略号(……)

    这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...

  7. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

  8. CSS单行、多行文本溢出显示省略号(……)解决方案

    单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...

  9. 《CSS实现单行、多行文本溢出显示省略号》

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方式: overflow: hidden; te ...

随机推荐

  1. Spring.Web.Mvc 注入(控制器属性注入)

    1.web.config配置 <?xml version="1.0" encoding="utf-8"?><!-- 有关如何配置 ASP.NE ...

  2. logback 中文手册

    摘自:http://aub.iteye.com/blog/1896611 logback 中文手册 博客分类:  Log loglogbackloback手册loback中文手册  logback 常 ...

  3. 如何将一个用utf-8编码的文本用java程序转换成ANSI编码的文本

    jdk有一个关于UTF-8的bug所以加了一句 br.skip(1); bugID: http://bugs.java.com/view_bug.do?bug_id=4508058 public st ...

  4. Maven 项目使用开源中国镜像

    从maven中央库下载jar非常缓慢甚至有时候会下载不下来. 可以采用中国的maven镜像.目前主要是 开源中国的镜像. 找到maven配置文件setting.xml,打开 中间添加开源中国的配置: ...

  5. APUE(1)----UNIX基础知识

    一.UNIX体系结构 所有操作系统都为他们所运行的程序提供服务,典型的服务包括:执行新程序.打开文件.读文件.分配存储区等.严格意义上来说,操作系统可以定义为一种软件,它控制计算机硬件资源,提供程序运 ...

  6. .net Reflection(反射)- 二

    反射 Reflection 中访问方法 新建一个ClassLibrary类库: public class Student { public string Name { get; set; } publ ...

  7. React+gulp+browserify模块化开发

    阅读本文需要有React的基础知识,可以在React 入门实例教程和React中文官网进行基础学习. 没有React基础也可以学习本文,本文主要不是学习React,而是gulp+browserify进 ...

  8. 【C#】MVC+EF+LINQ 综合小项目

    第一,创建数据库 create table category(id int primary key,name nvarchar(20)) create table news(id int primar ...

  9. Partial关键字

    Partial关键词定义的类可以在多个地方被定义,最后编译的时候会被当作一个类来处理. 首先看一段在C#中经常出现的代码,界面和后台分离,但是类名相同. public partial class Fo ...

  10. C语言编程学习:链表的来源分析

    C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...