text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(…)。但部分浏览器还需要加宽度width属性。

css代码:

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

但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。

WebKit浏览器或移动端的页面

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

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

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

    HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  2. css多行文本溢出显示省略号(兼容ie)

    在日常编写页面中,我们经常遇到内容行数过多时,需要出现 “...” 来处理.但是又要考虑IE浏览器或IE内核浏览器的兼容性. 普通实现方法: display: -webkit-box; -webkit ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. WinFrom开发小案例

    C# 开发环境: VisualStudio2015 数据库: SQLserver2008 程序主界面: 注释: lbl标签: 程序中的lbl标签:编号.人数.姓名.性别.请输入要查询的信息,这里他们只 ...

  2. AppleDoc

    使用AppleDoc快速生成iOS开发文档 _ 皮卡丘♪-(´ε` ) 用 appledoc 生成文档 _ Garan no dou xcode-select_ error_ tool 'xcodeb ...

  3. java基础知识(初学)

    (小记) 文本文档方式可以下载notepad 在设置-新建-修改默认语言为java 编码为ANSI! java关键字特点:1.完全小写字母.如:public. java标识符:方法的名称,类的名称,变 ...

  4. android软件开发基础

    1.android特性:开放性:开源的一个基础, 方便性: 平等性: 2.Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,Broadc ...

  5. 【rabbitmq消息队列配置】

    #erlang语言支持包 #rabbitmq-server安装支持 #添加用户 #删除用户 #用户角色 #启动 #登录 #管理界面 #guest登录不了: Rabbitmq.conf文件添加 #开启管 ...

  6. 【C】switch-case里面,加或不加break的区别

    int test; test = ; switch(test) { : test++; printf("value = 0"); // 打印printf,后续没有break代码,系 ...

  7. python应用:爬虫框架Scrapy系统学习第四篇——scrapy爬取笔趣阁小说

    使用cmd创建一个scrapy项目: scrapy startproject project_name (project_name 必须以字母开头,只能包含字母.数字以及下划线<undersco ...

  8. Discuz被挂马 快照被劫持跳转该如何处理 如何修复discuz漏洞

    Discuz 3.4是目前discuz论坛的最新版本,也是继X3.2.X3.3来,最稳定的社区论坛系统.目前官方已经停止对老版本的补丁更新与升级,直接在X3.4上更新了,最近我们SINE安全在对其安全 ...

  9. Maximum sum

    描述 Given a set of n integers: A={a1, a2,-, an}, we define a function d(A) as below: t1 t2 d(A) = max ...

  10. 【blockly教程】第三章Blockly顺序程序设计

    3.1 什么是Blockly语言  2012年6月,Google发布了完全可视化的编程语言Google Blockly,整个界面清晰明了, 你可以如同在玩拼图一样用一块块图形对象构建出应用程序.每个图 ...