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）

    ①自己封装的一个方法String.format String.format = function() { var s = arguments[0]; for (var i = 0; i < ar ...

  2. ios配置xmpp即时聊天-服务器端

    一.安装 到MySQL官网上http://dev.mysql.com/downloads/mysql/,下载mysql可安装dmg版本 比如:Mac OS X ver. 10.7 (x86, 64-b ...

  3. c++运算符重载-如何决定作为成员函数还是非成员函数

    The Decision between Member and Non-member The binary operators = (assignment), [] (array subscripti ...

  4. 老男孩Day7作业：选课系统

    1.作业需求:角色:学校.学员.课程.讲师 1. 创建北京.上海 2 所学校 2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开 3. 课程包 ...

  5. 《图解HTTP》阅读笔记--第七章---确保WEB安全的HTTPS

    第七章.确保WEB安全的HTTPSHTTP的缺点:通信使用明文(不加密),内容可能会被窃听 解决---加密处理: //将通信加密 :通过SSL(安全套接层)---HTTPS(超文本传输安全协议)--- ...

  6. 关于MVC模型的NSNotification用法

    对于iOS开发开发者, Model View Controller 模型能帮你快速理清开发思路,最近在使用Model给Controller传递数据时候了解了关于 NSNotification的一些用法 ...

  7. [HAOI2006]受欢迎的牛 tarjan缩点 BZOJ1051

    题目背景 本题测试数据已修复. 题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 ...

  8. CF580C Kefa and Park dfs

    Kefa decided to celebrate his first big salary by going to the restaurant. He lives by an unusual pa ...

  9. C# DateTime.Compare时间大小对比

  10. 2.2 Go 常量与枚举

    package main import ( "fmt" "math" ) //常量 func cons(){ , //常量的数字在不明确指定类型的情况下,即可以 ...