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. RouteSelector的初始化

    继前面的几篇OKhttp的拦截器简单分析之后,对于后续Okhttp之间的分析自己也着实琢磨了一段时间,是分析RealConnection?还是ConnectionPool,随着对Okhttp源码的深入 ...

  2. POJ3050 -- Hopscotch 简单的dfs搜索

    原题链接:http://poj.org/problem?id=3050 (一些文字过会儿再说现在有事儿) #include <cstdio> #include <set> us ...

  3. Number BZOJ3275 最大流

    有N个正整数,需要从中选出一些数,使这些数的和最大. 若两个数a,b同时满足以下条件,则a,b不能同时被选 1:存在正整数C,使a*a+b*b=c*c 2:gcd(a,b)=1 Sample Outp ...

  4. C#是类型安全语言

    C#是一种类型安全语言:所有的表达式都解析成某个类型的一个实例,在编译器生成的代码中,只会执行对这个类型来说有效的操作. [优势] 许多错误能在编译时就检测到,确保代码在执行这段代码前是正确的: 生成 ...

  5. Luogu P2107 小Z的AK计划 堆贪心

    好久不做这种题了... 存一下每个点的位置和时间,由于达到某个位置跟之前去哪里AK的无关,所以在时间超限后,可以用大根堆弹掉之前消耗时间最大的,来更新答案,相当于去掉之前花费最大的,直到时间不在超限. ...

  6. codeforces-984D——XOR-pyramid（DP）

    题目传送门 题目描述:给你一个f函数,这个函数的自变量是一个数列,函数表达式就是题目所给的描述,然后给你一个数列,问你数列中某区间  怎么选取 可以使函数值最大. 题目思路:  有关区间选取的问题,很 ...

  7. 毕业设计 python opencv实现车牌识别 预处理

    主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...

  8. A. The number of positions

    A. The number of positions time limit per test 0.5 second memory limit per test 256 megabytes input ...

  9. ymPrompt.js消息提示组件

    转载:https://www.cnblogs.com/linzheng/archive/2010/11/15/1878058.html 使用说明: 1.在页面中引入ymPrompt.js.如:< ...

  10. sofa-boot（1）helloworld项目

    本示例参考:https://www.sofastack.tech/sofa-boot/docs/QuickStart 示例采用sofa-boot 3.1.1版本. 如下步骤: 1.进入https:// ...