这个问题经常遇到

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. JS 点击复制Copy

    1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 va ...

  2. linux mysql-server和mysql-client

    我认为server和client是DBMS的两个面向不同操作对象的工具.server是DBMS面向物理层次,包含存储数据的一系列机制.处理方法的集成:client是DBMS面向用户,提供一系列工具为用 ...

  3. 修改win7锁定界面背景

    Regedit HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows/CurrentVersion/Authentication/LogonUI/Backgrou ...

  4. Asp.NET路由管道处理过程 【重要】

    当ASP.NET处理请求时,路由管道主要由以下几个步骤组成: 1.UrlRoutingModule尝试使用RouteTable中注册的理由匹配当前请求: 2.如果RouteTable中有一个路由成功匹 ...

  5. Linux help websites

    FAQ

  6. ubuntu 14.04 GDAL

    autotools-dev comerr-dev hdf5-helpers icu-devtools krb5-multidev libarmadillo4 libarpack2 libblas3 l ...

  7. mvc路由参数注解

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); //过滤掉禁止访问的路由 routes.MapRoute( name: &quo ...

  8. 使用Erlang和Yaws开发REST式的服务

    看过那张很出名的“Apache vs. Yaws”图么?是不是在考虑你也应该使用Yaws了?这些图给人的第一印象是,Yaws在可伸缩性上具有难以置信的巨大优势,它可以扩展到80000个并行的连接,而 ...

  9. android打包大小笔录

    版本 4.6.1 1-1  游戏完整包的大小 1-2 1级代码压缩 1-3 2级代码压缩 1-4 3级代码压缩 2-1 删除核心战斗的部分资源 2-2 2级代码压缩 3-0 删除外部UI的资源  剩下 ...

  10. WPFbutton样式

    有四款button不同的风格 <Window x:Class="SjglzxRj.Window3" xmlns="http://schemas.microsoft. ...