css实现文本超出两行隐藏
当文字显示超出两行时,多余部分文字隐藏,用到的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实现文本超出两行隐藏的更多相关文章
- CSS控制文本超出后隐藏并用省略号代替
一.仅定义text-overflow:ellipsis; 不能实现省略号效果. 二.定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果. ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...
- css中文本超出部分省略号代替
p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...
- css实现超出两行隐藏
overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-l ...
- 通过css实现文本超出部分以省略号(......)代替
一.单行溢出 1,固定宽度(非常容易) text-overflow: ellipsis; 2,不固定宽度 思路:想让这个区域成为块元素,然后不换行,溢出隐藏. display: block; whit ...
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- css实现文本超出部分省略号显示
一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...
- 【css】文本超出行数以省略号显示
//超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...
随机推荐
- (Linux)初探cmake .和make命令
cmake编译OpenCV工程 首先我们看到文件夹中有一cpp文件,CMakeLists.txt文件和一张图片 首先进行cmake .命令 接着进行make命令 . 然后就得到了可执行文件,也就是说可 ...
- [Kubernetes]说说 Service 与 Ingress
在 Kubernetes 中, Service 有三种对外暴露的方法,但是由于每个 Service 都要有一个负载均衡的服务,所以采用 Service 的话,会造成既浪费成本又高的现象.对于用户来说, ...
- shell利用mysql表项的icmp检测
作者:邓聪聪 利用mysql的表项记录IP地址和对应状态 +----+-----------------+--------+--------+ | id | ip_host | desc | stat ...
- winform倒计时
public partial class Form1 : Form { private int Seconds; public Form1() { InitializeComponent(); // ...
- MySQL(三)
一.创建库 1.创建一个库: create database 数据库名;create database 库名 character set 编码; mysql> create database m ...
- vue学习(二)
- zabbix4.0添加磁盘io监控
agent服务器端的操作 1.设置zabbix-agent端的配置文件 找到agent端配置文件的位置,本例agent端的配置文件路径在/usr/local/etc/zabbix下 首先:在主配置文件 ...
- OpenCV中的KNN
一.K近邻 有两个类,红色.蓝色.我将红色点标记为0,蓝色点标记为1.还要创建25个训练数据,把它们分别标记为0或者1.Numpy中随机数产生器可以帮助我们完成这个任务 import cv2 impo ...
- 当运行docker run -i -t ubuntu /bin/bash时,提示报错Error response from daemon: EOF?
可能是下载过程中出现错误,重新执行docker pull ubuntu,在执行docker run -i -t ubuntu /bin/bash就OK了.
- 小程序+node+mysql做的小项目
git源码地址: https://github.com/songkangle/weixin_node 小程序页面 数据库 user表 dream表 node的express框架index.js var ...