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. export to pdf

    first we need to download the link is : http://files.cnblogs.com/akingyao/itextsharp-all-5.4.2.zip t ...

  2. springboot整合mybatis,redis,代码(四)

    一 说明 这是spring整合redis注解开发的系类: 二 正文 在注解开发时候,会有这几个注解需要注意: 具体含义: 1.@Cacheable 可以标记在方法上,也可以标记在类上.当标记在方法上时 ...

  3. VC对话框的菜单设置变灰， 打勾 等

    一般可以用UPDATE_COMMAND_UI消息,并加入以下代码:pCmdUI->Enable(FALSE); 就实现,弹对话框的菜单需要增加对WM_INITMENUPOPUP消息的处理以后,才 ...

  4. tp 查询

  5. 2.Spring的Bean生命周期和组装方式

    1.Spring IoC容器概述 Spring IoC容器: Spring容器即体现了IoC原理    Spring容器通过读取配置元数据负责对Beans实例化.配置和装配     配置元数据可以用X ...

  6. 基于webpack的vue项目路径别名

    在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...

  7. vue环境搭建（一）

    1.Vue依赖node npm命令执行,需要下载node 下载地址 2.安装全局vue-cli脚手架(搭建环境所需要模板),  window+ r 打开命令工具,输入cmd  ,这时显示命令行工具,输 ...

  8. 这是通过 Open Live Writer(是个博客编辑器) 发布的

    Open Live Writer  是开源的win10上的博客编辑器

  9. 转换Excel格式

    做一个功能需要将excel2003格式转成2007的格式,代码如下 需要引用office的microsoft.office.interop.excel.dll var app = new Micros ...

  10. free -m命令输出详解

    free -m输出有3行: Mem:表示物理内存 -/+ buffers/cached:表示物理内存缓存 Swap:表示硬盘交换分区 其中Mem中的total.used.free.shared.buf ...