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. Visual Studio 中常用的快捷键

    项目相关的快捷键 Ctrl + Shift + B = 生成项目 Ctrl + Alt + L = 显示 Solution Explorer(解决方案资源管理器) Shift + Alt+ C = 添 ...

  2. springboot启动报错:Could not resolve placeholder

    SpringBoot1.5,项目启动报错: Could not resolve placeholder 很明显是找不到配置文件引起的,查看配置文件目录结构如下: 很正常呀. 完全可以加载applica ...

  3. Swift_销毁

    Swift_销毁 点击查看源码 销毁 func test() { class SomeClass { //类销毁时 通知此方法 deinit { print("销毁") } } v ...

  4. 在Notepad++中使用文本对比插件

    目前Notepad++最新版是7.5.1,但很多插件仍然不能在64位版中使用,官网上是这么说的“Note that the most of plugins (including Plugin Mana ...

  5. iOS 11.2 - 11.3.1 越狱教程

    iOS 11.2 - 11.3.1 越狱教程 一.准备相应的工具 (1) 下载 CydiaImpactor,官网地址是 http://cydiaImpactor.com (2) 下载 Electra, ...

  6. vue 新属性学习

    1, $listeners 父级元素 <base-input v-on:focus.native="onFocus"></base-input> 子级元素 ...

  7. 剑指Offer-迭代

    1.大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0) 备注:斐波那契数列指的是这样一个数列从第3项开始,每一项都等于前两项之和. public st ...

  8. window安装ubuntu系统

  9. 自定义注解实现(spring aop)

    1.基本概念 1.1 aop 即面向切面编程,优点是耦合性低,能使业务处理和切面处理分开开发,扩展和修改方面,当引入了注解方式时,使用起来更加方便. 1.2 应用场景 打日志.分析代码执行时间.权限控 ...

  10. Currency Helper

    using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; /// <summary> /// 货币 ...