这个问题经常遇到

1、单行文本溢出显示省略号(…)

text-overflow:ellipsis-----部分浏览器还需要加宽度width属性

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

2、多行文本溢出显示省略号,WebKit浏览器或移动端的页面

overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;

3、兼容各种浏览器的jQuery插件-jQuery.dotdotdot(https://github.com/FrDH/jQuery.dotdotdot)

这个用起来很简单,js加

$(function(){

$("#div1").dotdotdot({});

})

css里设置宽高,宽控制换行,高控制显示几行。

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

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

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

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

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

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

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

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

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

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

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

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

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

  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. html5权威指南:嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

    嵌入另一张HTML文档.通过插件嵌入内容.嵌入数字表现形式:http://www.cnblogs.com/yc-755909659/p/5928125.html

  2. 向网页中写入js和css

    向网页中写入js和css 本函数由前辈所写 loadFile: function (url, ftype) { var fileref; if (ftype == "js") { ...

  3. HDU 1695 GCD#容斥原理

    http://acm.hdu.edu.cn/showproblem.php?pid=1695 翻译题目:给五个数a,b,c,d,k,其中恒a=c=1,x∈[a,b],y∈[c,d],求有多少组(x,y ...

  4. 查看mms UA/profile

    查看彩信的UA/profile信息,当然可以通过打印log来看. 但还有一个比较简便的方法: 直接抓取一个MMS包,用网络包分析工具打开,找到承载该MMS信息的HTTP协议包即可查看:

  5. PHP class which generates PDF files from UTF-8 encoded HTML

    http://www.mpdf1.com/mpdf/index.php

  6. display flex 和a标签不行

    父元素display: flex;  display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; 配合子元素 fl ...

  7. php 好用的函数

    extract — 从数组中将变量导入到当前的符号表,数组的键将作为新的变量,数组的值将最为新变量的值

  8. php 实现简易模板引擎

    1.MVC简介 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式(详情自己百度): 1. Model(模型)表示应用程序核心 ...

  9. [Mark] openvswitch megaflow

    Megaflow is an OpenVSwitch (OVS) feature than enables us to install flows for which some fields are ...

  10. POJ 1696 Space Ant 极角排序(叉积的应用)

    题目大意:给出n个点的编号和坐标,按逆时针方向连接着n个点,按连接的先后顺序输出每个点的编号. 题目思路:Cross(a,b)表示a,b的叉积,若小于0:a在b的逆时针方向,若大于0a在b的顺时针方向 ...