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. Oracle中merge into语法

    merge into 语句就是insert和update的一个封装,简单来说就是: 有则更新,无则插入 下面说怎么使用 MERGE INTO table_Name  T1(匿名) using (另外一 ...

  2. 微信小程序强制横屏办法

    最近想学习学习微信小程序开发,本着先设计,再查找具体实现的方法的想法,在进行数据统计时,想着竖屏展示数据会造成重叠,或者数据显示不全而用省略号代替的问题,所以计划采用横屏的方式显示数据表格. 搜索到两 ...

  3. git 打tag

    查看已有tag git tag 创建新的tag git tag <version or tagname> -m <tag description> 例如创建一个版本1.0.0的 ...

  4. CF385C Bear and Prime Numbers 数学

    题意翻译 给你一串数列a.对于一个质数p,定义函数f(p)=a数列中能被p整除的数的个数.给出m组询问l,r,询问[l,r]区间内所有素数p的f(p)之和. 题目描述 Recently, the be ...

  5. 黑马MySQL数据库学习day04 MySQL变量 存储过程 用户和授权管理

    /* MySQL中的变量局部变量,用户变量,会话变量和全局变量. 用户变量不用定义,直接使用. 1.用户变量赋值 set @xxx = 值; 2.查询 select @xxx; 语法帮助: 过程保存在 ...

  6. C语言讲解命令行参数

    命令行(command line):是在命令行环境中,用户为运行程序输入命令的行. 命令行参数(command-line argument): 是同一行的附加项. C编译器允许main()没有参数或者 ...

  7. P2905 [USACO08OPEN]农场危机Crisis on the Farm

    传送门 DP 设 f [ i ] [ j ] [ k ] 表示已经走了 i 步,向上走了 j 步,向右走了 k 步时能拯救的最多奶牛数(j,k可以为负,表示反向) 设 g [ i ] [ j ] 表示 ...

  8. UVA1714 Keyboarding

    传送门 坑很多的一题 这里要感谢crk大佬提前帮我把所有的坑都踩了一遍...233 讲一下题目的意思: 给你一个神奇的 r*c 的键盘 (r,c<=50) 上面有大写的字母,数字,' - '号 ...

  9. redis安装及应用

    Redis安装及主从配置 server2,3,4. 安装 tar zxf redis-4.0.1.tar.gz cd redis-4.0.1 yum install -y gcc make make ...

  10. LeeCode（5. Longest Palindromic Substring）

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...