.textone {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 25px;
max-height: 25px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

 将行高和最大行高设置为一样的值,-webkit-line-clamp: 1,限制行数,这样就可以定义超过一行自动隐藏的效果了;设置超过两行自动隐藏是效果,line-height和max-heinght成比例,-webkit-line-clamp设为2,这样就可以实现超过两行自动隐藏多余部分的效果了:代码和效果图如下:


.textTow {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 23px;
max-height: 46px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}


  

CSS设置一行文字,超出部分自动隐藏的更多相关文章

  1. 文字超出DIV后,隐藏文字并显示...

    <html> <head> <style type="text/css"> #cs{width:100px;height:50px;line-h ...

  2. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

  3. 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  4. css设置一行显示,超出部分显示...

    碰到一些介绍时候需要一行显示,然后超出部分用...替代 white-space: nowrap;不换行显示text-overflow: ellipsis;以...显示overflow: hidden; ...

  5. CSS多行文字超出隐藏加省略号

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...

  6. css实现一行文字居中,多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

  7. css设置使文字显示2行多余的为省略号。。。

    .title{ font-size: .7rem; line-height: 1.5rem; overflow: hidden; /** 隐藏超出的内容 **/ word-break: break-a ...

  8. css设置使文字显示2行多余的为省略号...

    1 2 3 4 5 6 7 8 9 10 11 12 .title{        font-size: .7rem;        line-height: 1.5rem;          ove ...

  9. css设置禁止文字被选中

    // 禁止文字被鼠标选中 moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-se ...

随机推荐

  1. ubuntu下搭建nginx+mysql+php-fpm站点

    概述 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.  nginx的优势在于能以低内存高 ...

  2. 2017云计算开源峰会 你是想听Linux谈开源还是想听OpenStack谈开源?

    2017年,善于把握机遇的企业们不是正在开源,就是走在去开源的路上-- 开源是不是就意味着免费? 开源企业就是要当"活雷锋"? 开源项目究竟如何运作?如何参与开源社区? 如何获得最 ...

  3. Apache网站服务源码安装与站点部署

    简介: 在Internet 网络环境中,Web服务无疑是最为主流的应用系统,有了WEB站点,企业可以充分展示自己的产品,公司,宣传自己的企业形象,提供各种网上交流,业务平台等. Apache起源:源于 ...

  4. single number i && ii && iii

    Problem statement Elementary knowledge: There is a popular question when I seeked my job at Beijing: ...

  5. 【Java SE】如何用Java实现直接选择排序

    摘要:直接选择排序属于选择排序的一种,但是它的排序算法比冒泡排序的速度要快一些,由于它的算法比较简单,所以也比较适合初学者学习掌握. 适宜人群:有一定Java SE基础,明白Java的数据类型,数组的 ...

  6. TCP协议简介

    1.TCP协议的特点 TCP是面向连接的运输层协议 每一条TCP连接只能有两个端点.TCP只能进行点对点通信 TCP提供可靠交付的服务.通过TCP连接传输的数据,无差错.不丢失.不重复.并且按序到达 ...

  7. SpringMVC中使用@Value给非String类型注入值

    String类型的@Value注入方式 String类型的直接可以使用 @Value("陈婉清") private String name; 非String类型的@Value注入方 ...

  8. java 解决时间相减问题

    比如 Date currentTime ="2011-06-20 9:23:50"; Date endTime="2011-06-21 10:33:56"; 要 ...

  9. RGB565的理解

    一个彩色图像由R G B三个分量组成,一个RGB565的每一个像素点数据为2Byte,即16位,那么从名字上就可看出来这16位中,高5位为R分量,中间6位为G分量,低5位为B分量. 下面做了一个实验, ...

  10. An Introduction to Stock Market Data Analysis with R (Part 1)

    Around September of 2016 I wrote two articles on using Python for accessing, visualizing, and evalua ...