欢迎加入前端交流群来py749539640

单行:

 div{/* 单行溢出隐藏 */
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

多行:

 div{/* 多行溢出隐藏 */
width: 150px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

html单行、多行文本溢出隐藏的更多相关文章

  1. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  2. 多行文本溢出隐藏处理,兼容ie,火狐

    问题 多行文本溢出隐藏,webkit内核浏览器如谷歌支持如下写法: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - ...

  3. CSS控制Span强制换行、溢出隐藏

    CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...

  4. 【CSS/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

    引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或 ...

  5. HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  6. 【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

    写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或优雅地实 ...

  7. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  8. css单行文本及多行文本溢出显示省略号

    关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...

  9. css单行文本和多行文本溢出实现省略号显示

    1.单行文本溢出 文本内容 <div class="singleLine"> HelloWorldHelloWorldHelloWorldHelloWorldHello ...

随机推荐

  1. 对python变量的理解

    #!/usr/bin/python class Person: '''some words content or descriptions!''' name='luomingchuan' _age = ...

  2. Habernate配置一对一,一对多,多对多(二)

    一.开篇 紧接着上篇的博客来写:http://www.cnblogs.com/WJ--NET/p/7845000.html(habernate环境的搭建) 二.配置一对一 2.1.新建客户类和公司类( ...

  3. Servlet基础(二)

    1.什么是Servlet   java类,提供web形式的访问   servlet就是按照javaee中servlet规范所编写的java类   能够被浏览器通过URL形式访问到 2.怎么在javae ...

  4. (转)Django学习之 第二章:Django快速上手

    安装Python  安装Django非常容易.因为Django可以运行在任何可以运行Python的环境中,所以可以以多种方式进行配置. 在本章我们将尝试覆盖几种常见的Django安装场景. Djang ...

  5. P3387 【模板】缩点 && P3388 【模板】割点(割顶)

    Tarjan算法 应用: 有向图的强连通分量 无向图割点和桥 双连通分量 接下来主要谈论前面两者的应用(主要是第三种还没学会) 算法简要介绍 我们需要先理解一下知识:搜索树 有向图的搜索树的4种边,如 ...

  6. python之类与对象的属性

    类相关的知识 在python2中的区分: 经典类: class School: pass 新式类: class School(object): pass 在python3中以上两种均为新式类 属性: ...

  7. JavaFX 的 UI 控件集 ControlsFX

    出处:http://www.oschina.net/p/controlsfx JavaFX 的 UI 控件集 ControlsFX ControlsFX 开源项目旨在为 JavaFX 开发提供更多的 ...

  8. Vue学习之路第七篇:跑马灯项目实现

    前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...

  9. [USACO07OPEN]Catch That Cow

    题目:洛谷P1588.HDU2717 题目大意:有一个人在点$n$,一头牛在点$k$,人每秒能从$x$移动到点$x+1$.$x-1$.$2x$,牛不会动,求最少多少秒后人能移动到牛所在的$k$. 思路 ...

  10. ItChat与图灵机器人的结合

    前景: 我在知乎关注一位大佬 名字叫 LittleCoder 我是在他开发ItChat包时关注的 ItChat已经完成了微信的个人账号的API接口 已经实现了实时获取用户的即时信息并自动化进行回应 后 ...