当文字显示超出两行时,多余部分文字隐藏,用到的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. 查看提交历史(git log)

    git log 命令 在完成了几次提交,或者克隆了一个已有提交历史的仓库后,要查看历史提交记录,可以通过git log命令来实现. $ git log commit 0becea8e1966df258 ...

  2. js reduce()方法使用

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. 注意: reduce() 对 ...

  3. wifi基本原理

    参考链接: https://www.cnblogs.com/zhoading/p/8891206.html https://openwrt.org/zh-cn/doc/uci/wireless htt ...

  4. 动态渲染页面爬取-Selenium & Splash

    模拟浏览器的动机 JS动态渲染的页面不止Ajax一种 很多网页的Ajax接口含有加密参数,分析其规律的成本过高 通过对浏览器运行方式的模拟,我们将做到:可见即可爬 Python中常用的模拟浏览器运行的 ...

  5. linux删除软链接文件【原创】

    删除软链接文件时,不要加“/”,去注意 正确方法: rm -rf ./softlinkfile 错误方法: rm -rf ./softlinkfile/ 上面错误的操作,这样会把软链接的源文件一同删除 ...

  6. 0ctf 2019 zero_task

    一个条件竞争的洞,以前没有接触过.比赛完研究了wp复现下. new_thread结构体如下 new_thread: thread_area size0x8 thread_area+0x8 size 0 ...

  7. .Net core----mongodb在插入数据时,会产生时间差的问题

    今天在给mongodb插入日期格式的数据时发现,日期时间相差8个小时,原来存储在mongodb中的时间是标准时间UTC +0:00,而中国的时区是+8.00 . 因此在插入的时候需要对时间进行处理: ...

  8. USB鼠标键盘数据格式以及按键键值

    鼠标发送给PC的数据每次4个字节 BYTE1 BYTE2 BYTE3 BYTE4 定义分别是: BYTE1 --        |--bit7:   1   表示   Y   坐标的变化量超出-256 ...

  9. P3436 [POI2006]PRO-Professor Szu

    P3436 [POI2006]PRO-Professor Szu 题目描述 n个别墅以及一个主建筑楼,从每个别墅都有很多种不同方式走到主建筑楼,其中不同的定义是(每条边可以走多次,如果走边的顺序有一条 ...

  10. python复习基本知识

    print(x or y) """x or y ; x 为 true ,则返回x ,否则返回flase“”“” and 则相反 优先级比较:not > and &g ...