HTML：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem est libero fugit placeat distinctio deserunt ipsam eveniet, odit officiis laudantium, quos, corporis saepe earum id quia unde impedit atque quod.

  </div>

</body>

</html>

CSS：

div {

  width:400px;

  overflow:hidden;

  text-overflow: ellipsis;

  word-break: break-all;/*一个单词为了换行好看，允许被拆开*/

  -webkit-box-orient:vertical;

  -webkit-line-clamp:;

  display: -webkit-box; /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/

}

结果：

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

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

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

  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. 使用js实现水波效果

    使用到的工具:jQuery Ripples Plugin 下载安装 git clone https://github.com/sirxemic/jquery.ripples.git 引入jquery, ...

  2. Java基础笔记（十九）——抽象类abstract

    抽象类作为父类,不能实例化自己类型的对象,但可以通过向上转型实例化子类对象. public abstract class Animal{  } 比如eat(); ,每个动物子类都应有自己的方法,那An ...

  3. Job for postfix.service failed because the control process exited with error code. See "systemctl status postfix.service" and "journalctl -xe" for details.

    这是因为防火墙或者配置文件导致,无法启动的邮件服务!! 首先关闭防火墙! 修改配置文件 vim /etc/postfix/main.cf inet_protocols = ipv4 inet_inte ...

  4. 老男孩python作业3-购物车程序优化

    购物车优化要求:用户入口: 1.商品信息存在文件里 2.已购商品,余额记录.第一次启动程序时需要记录工资,第二次启动程序时谈出上次余额 3.允许用户根据商品编号购买商品 4.用户选择商品后,检测是否够 ...

  5. 75th LeetCode Weekly Contest Rotate String

    We are given two strings, A and B. A shift on A consists of taking string A and moving the leftmost ...

  6. UVALive 3645 时序模型

    按航班拆点 注意返边的条件 #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+11; const int ...

  7. msyql操作100题

    1.1.1 开启MySQL服务 /etc/init.d/mysqld start 使用/etc/init.d/mysqld start命令启动数据库的本质就相当于执行mysqld_safe --use ...

  8. 绿豆蛙的归宿（Java）

    Description 随着新版百度空间的上线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 给出一个有向无环图,起点为1终点为N,每条边都有一个长度,并且从起点出发能够到达所有的点,所有的点 ...

  9. WIN10安装SW2012完整破解文件和问题解决Crack

    Win10在安装solidword后,激活时有可能报错,本文介绍怎么解决问题 安装后激活报错信息: 一.按下面步骤进行安装 1.相关序列号,记住要断网进行安装 Install SolidWorks 2 ...

  10. python中的设计模式

    单例模式:Python 的单例模式最好不要借助类(在 Java 中借助类是因为 Java 所有代码都要写在类中),而是通过一个模块来实现.一个模块的模块内全局变量.模块内全局函数,组合起来就是一个单例 ...