当文字显示超出两行时,多余部分文字隐藏,用到的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. 封装selenium自动化框架中的截图功能

    对selenium自带的截图功能进行封装: 以下为封装的代码,自定义一个.py文件即可,图片路径自己设置一个. #coding:utf-8 class Screen(object): ''' 封装的截 ...

  2. .call() 与 .apply() 的用法及区别

    首先说明两个方法的含义: apply:调用一个对象的一个方法,用另一个对象替换当前对象.例如:B.apply(A, arguments);即A对象应用B对象的方法.call:调用一个对象的一个方法,用 ...

  3. AI应用开发实战(转)

      AI应用开发实战 - 从零开始配置环境 与本篇配套的视频教程请访问:https://www.bilibili.com/video/av24421492/ 建议和反馈,请发送到https://git ...

  4. 【转】JAVA错误:The public type *** must be defined in its own file***

    出现The public type xxx must be defined in its own file这个问题,是由于定义的JAVA类同文件名不一致.public类必须定义在它自己的文件中. 解决 ...

  5. php中trait的使用

    1.php中的trait是啥? 看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait是一种代 ...

  6. php 过滤表单提交

    list($addressId,$couponId,$payType,$useIntegral,$mark,$combinationId,$pinkId,$seckill_id,$formId,$ba ...

  7. 关于mvc中传递匿名对象,view中无法解析

    最近做项目用到MVC,发现用linq查询得到的数据是匿名类型对象,通过模型绑定.或者ViewBag.ViewData进行数据传递后,View解析报错:“object 未包含xx的定义”: 没找到好的解 ...

  8. python之地基(二)

    上一个阶段呢,我们已经学习了python的数据的类型.今天呢,我们来学习各种各样的运算符. 一.基本运算符 a = 10    b = 20 运算符号 描述 示例 + 加——两个对象相加 a+b 输出 ...

  9. python3 函数注意要点

    一.定义一个函数: def test(): #用def关键词开头 print('*****') def test2(a,b): #a,b为形参 print(a,b) return a,b # retu ...

  10. mysql_config not found和error: command 'gcc' failed with exit status 1

    要想使python可以操作mysql 就需要MySQL-python驱动,它是python 操作mysql必不可少的模块. 下载地址:https://pypi.python.org/pypi/MySQ ...