div{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
word-wrap: break-word;
white-space:pre-wrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

  

如果只是一行的话,要简单一些。

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

css:实现文本两行或多行文本溢出显示省略号的更多相关文章

  1. css实现文本两行或多行文本溢出显示省略号

    word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-b ...

  2. css-文本两行或多行文本溢出显示省略号(转)

    转自:http://www.daqianduan.com/6179.html  感谢作者 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis ...

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

    一.单行文本省略 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 二.多行文本省略 实现方法: display ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 08.DRF-反序列化

    三.反序列化使用 3.1 验证 使用序列化器进行反序列化时,需要对数据进行验证后,才能获取验证成功的数据或保存成模型类对象. 在获取反序列化的数据前,必须调用is_valid()方法进行验证,验证成功 ...

  2. vue-admin-template搭建后台管理系统的学习(一)

    首先我们来看看这个基础模版的目录结构 ├── build // 构建相关  ├── config // 配置相关├── src // 源代码│   ├── api // 所有请求│   ├── ass ...

  3. 深入理解Java闭包概念

    闭包又称词法闭包 闭包最早定义为一种包含<环境成分>和<控制成分>的实体. 解释一:闭包是引用了自由变量的函数,这个被引用的变量将和这个函数一同存在. 解释二:闭包是函数和相关 ...

  4. Css教程玉女心经版本

    视频参见:php中文网css玉女心经视频教程 Css教程玉女心经版本 第1章     :css快速入门 1.1     什么是css 改变html框架的样式. 1.2     css的三种引入形式 第 ...

  5. python 2 与python 3区别汇总

    python 2 与python 3区别汇总 一.核心类差异1. Python3 对 Unicode 字符的原生支持.Python2 中使用 ASCII 码作为默认编码方式导致 string 有两种类 ...

  6. 微信小程序预览Word文档

    <view data-url="https://xxxcom/attachment/word.docx" data-type="docx" catchta ...

  7. 【Xamarin.Forms 2】App基础知识与App启动

    系列目录 1.[Xamarin.Forms 1]App的创建与运行 引言 本篇文章将介绍Xamarin.Forms中 App 基础知识和 App的启动. 开发环境 Visual Studio 2019 ...

  8. hive命令查询数据不显示表头解决办法

    在hive命令行中查询数据如下: 表头未显示出来 解决办法: 修改hive安装包conf/hive-site.xml配置文件: <property> <name>hive.cl ...

  9. 一、web自动化快速使用

        1.什么是Selenium? selenium是一款基于web网页的UI自动化测试的框架,用来做web自动化测试 支持多浏览器操作,ie.firefox.chrome.edge.safaria ...

  10. 面向对象之继承以及抽象(Java实现)

    回顾封装 关于面向对象三大特性,我们可以很自信的回答:封装.继承.多态 之前学习的封装,可以很直观的理解为了保护数据,我们在idea中可以用alt+insert进行一个选择 constructer构造 ...