CSS设置一行文字,超出部分自动隐藏
.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设置一行文字,超出部分自动隐藏的更多相关文章
- 文字超出DIV后,隐藏文字并显示...
<html> <head> <style type="text/css"> #cs{width:100px;height:50px;line-h ...
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
- 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)
文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...
- css设置一行显示,超出部分显示...
碰到一些介绍时候需要一行显示,然后超出部分用...替代 white-space: nowrap;不换行显示text-overflow: ellipsis;以...显示overflow: hidden; ...
- CSS多行文字超出隐藏加省略号
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...
- css实现一行文字居中,多行文字左对齐
问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...
- css设置使文字显示2行多余的为省略号。。。
.title{ font-size: .7rem; line-height: 1.5rem; overflow: hidden; /** 隐藏超出的内容 **/ word-break: break-a ...
- css设置使文字显示2行多余的为省略号...
1 2 3 4 5 6 7 8 9 10 11 12 .title{ font-size: .7rem; line-height: 1.5rem; ove ...
- css设置禁止文字被选中
// 禁止文字被鼠标选中 moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-se ...
随机推荐
- hdu3829最大独立集
The zoo have N cats and M dogs, today there are P children visiting the zoo, each child has a like-a ...
- 2017云计算开源峰会 你是想听Linux谈开源还是想听OpenStack谈开源?
2017年,善于把握机遇的企业们不是正在开源,就是走在去开源的路上-- 开源是不是就意味着免费? 开源企业就是要当"活雷锋"? 开源项目究竟如何运作?如何参与开源社区? 如何获得最 ...
- SQL语法考核
--继上一篇MySQL的开发总结之后,适当的练习还是很有必要的-- SQL语法多变,不敢保证唯一,也不敢保证全对,如果错误欢迎指出,即刻修改. 一.现有表结构如下图 TABLENAME:afinfo ...
- 如何应对苹果app 的ipv6 时代?腾讯专家教您进行环境改造
WeTest 导读 WWDC2015苹果宣布在ios9支持纯IPv6的网络服务,并且要求2016年提交到app store的应用必须兼容纯IPv6的网络,要求适配的系统版本是ios9以上(包括ios9 ...
- 禁止LISTCTRL表头拖动
禁止ListCtrl表头拖动(Prevent CListCtrl column resizing) /*The header control in the ListView control sends ...
- Java学习笔记——浅谈数据结构与Java集合框架(第一篇、List)
横看成岭侧成峰,远近高低各不同.不识庐山真面目,只缘身在此山中. --苏轼 这一块儿学的是云里雾里,咱们先从简单的入手.逐渐的拨开迷雾见太阳.本次先做List集合的三个实现类的学习笔记 List特点: ...
- 深入Java集合学习系列:Hashtable的实现原理
第1部分 Hashtable介绍 和HashMap一样,Hashtable也是一个散列表,它存储的内容是键值对(key-value)映射.Hashtable继承于Dictionary,实现了Map.C ...
- javascript之深入剖析this
this的重要性不言而喻,比如面试题经常考到,其次,如果彻底理解了this,那么对理解框架源码及编写高质量代码都有很大的帮助.本文就是要深入剖析this的几种情况,理解了原理,以后妈妈再也不用担心你的 ...
- 9、JcomboBox下拉框事件监听
9.JcomboBox下拉框事件监听 JComboBox()的事件监听类ItemListener.其范例代码如下: import java.awt.*; import java.awt.event.* ...
- Java Maps
HashMap 是线程不安全的,主要对于写操作来说,两个以上线程同时写入Map会被互相覆盖.线程安全指的保证对同一个map的写入操作按照顺序进行,一次只能一个线程更改.比如向HashMap里put(k ...