当文字显示超出两行时,多余部分文字隐藏,用到的css属性如下代码

    display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: ;//当属性值为3,表示超出3行隐藏

demo

.xsConInfo{
float: left;
width: 100%;
line-height: 25px!important;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}

 效果如下::

 

css实现文本超出两行隐藏的更多相关文章

  1. CSS控制文本超出后隐藏并用省略号代替

    一.仅定义text-overflow:ellipsis; 不能实现省略号效果. 二.定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果. ...

  2. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  3. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  4. css中文本超出部分省略号代替

    p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...

  5. css实现超出两行隐藏

    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-l ...

  6. 通过css实现文本超出部分以省略号(......)代替

    一.单行溢出 1,固定宽度(非常容易) text-overflow: ellipsis; 2,不固定宽度 思路:想让这个区域成为块元素,然后不换行,溢出隐藏. display: block; whit ...

  7. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  8. css实现文本超出部分省略号显示

    一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...

  9. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

随机推荐

  1. Collections -- OrderedDict类

    普通dict(字典)在插入的时候并不记住元素的顺序,迭代器会根据散列表(哈希表)中存储的顺序来生成的.而OrderedDict则会记录元素的顺序,并且在迭代器输出时,会按现在记录的顺序进行遍历. 例: ...

  2. centos6.5 配置静态IP

    1.修改网卡配置 编辑:vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 BOOTPROTO=static HWADDR=08:00:2 ...

  3. sqlyog连接mysql8.0

    1.本人安装的是mysql8.0社区版,安装包名称:mysql-installer-community-8.0.12.0.msi,可自行到官网下载. 2.安装完成后用sqlyog连接数据库出现密码乱码 ...

  4. L1-Day11

    1.问问他能不能来.[我的翻译]Ask him wether he can come.[标准答案]Ask him whether/if he can come.[对比分析]天呐 whether都能拼写 ...

  5. 20175306 迭代和JDB调试

    迭代和JDB调试 1.使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能 代码展示: public class C { public static ...

  6. Win2012 R2安装 mysql8.0

    1.官网下载安装 官网上面写着x86,其实是兼容x64和x86的,下载安装就行 2.安装navicat 3.navicat连接mysql的时候出现错误 client does not support ...

  7. [转] xgboost

    还是不太明白,先mark一下 https://blog.csdn.net/v_july_v/article/details/81410574

  8. 11:57:24 [org.springframework.kafka.KafkaListenerEndpointContainer#0-0-C-1] WARN o.apache.kafka.clients.NetworkClient - [Consumer clientId=consumer-2, groupId=jiatian_api] 3 partitions have leader……

    错误如下: 11:57:24 [org.springframework.kafka.KafkaListenerEndpointContainer#0-0-C-1] WARN  o.apache.kaf ...

  9. [Linux]不可重入函数

    一.概述 怎么会有可重入和不可重入. 在多任务系统下,中断可能在任务执行的任何时间发生:如果一个函数的执行期间被中断后,到重新恢复到断点进行执行的过程中,函数所依赖的环境没有发生改变,那么这个函数就是 ...

  10. Helloworld——SpringMVC

    搭建环境:eclipse 这里需要配置Server runtime environment——Apache Tomcat 到官网下载 解压 在eclipse中: Window perferences ...