CSS 实现单行及多行文字省略
单行文字省略
很多时候不确定字数限制,但换行可能影响整体设计,这个时候常用就是文字省略加全文字提示了
.dom{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
多行文字省略
.dom{
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
}
CSS 实现单行及多行文字省略的更多相关文章
- CSS实现单行与多行文字省略(truncation)
在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...
- jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于css实现单行、多行省略标记
实现单行: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 实现多行: display: -webkit-box; -we ...
- css实现单行(多行)文本溢出显示 ...
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- 【css】一行或者多行文字垂直水平居中
1.方法一:使用css3弹性盒子(兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持) <!DOCTYPE html> <html> < ...
- Jquery : 上下滚动--单行 批量多行 文字图片翻屏【转】
原文发布时间为:2010-02-01 -- 来源于本人的百度文章 [由搬家工具导入] 注:如果和左右滚动一起使用,则会出现冲突 一单行滚动(ad:http://www.gz138.com) <! ...
- css 之单行文本显示省略和多行文本省略
一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- CentOS8.0-1905安装配置ftp服务器
关键词:CentOS8/RHEL8;安装配置FTP/安装配置VSFTPD;被动模式/PASV##CentOS8.0-1905发布后,尝试将FTP服务器迁移至新版本的CentOS中,但是测试过程中,在防 ...
- objectarx之画多段线和画直线
void CCommonFuntion::DrowPloyLine(AcGePoint2dArray& inputpoints){ if (inputpoints.length() < ...
- More Effective C++: 04效率
16:牢记80-20准则 80-20准则说的是大约20%的代码使用了80%的程序资源:大约20%的代码耗用了大约80%的运行时间:大约20%的代码使用了80%的内存:大约20%的代码执行80%的磁盘访 ...
- bzoj1911 特别行动队
Description Input Output Sample Input 4 -1 10 -20 2 2 3 4 Sample Output 9 斜率优化 推式子 #include< ...
- Kubernetes1.3新特性:支持GPU
(一) 背景资料 GPU就是图形处理器,是Graphics Processing Unit的缩写.电脑显示器上显示的图像,在显示在显示器上之前,要经过一些列处理,这个过程有个专有的名词叫" ...
- UVA_445:Marvelous Mazes
Language:C++ 4.8.2 #include<stdio.h> #include<string.h> #include<ctype.h> int main ...
- shell学习(15)- eval及shell No such file or directory解决办法
eval可以读取一连串的参数,然后按照参数特性来执行.参数数目不限,彼此之间用分号隔开. eval会对后面的命令进行两遍扫描,如果第一遍扫描后,命令是个普通命令,则执行此命令:如果命令中含有变量的间接 ...
- jmeter响应代码为乱码
1.在请求的前面添加BeanShell PostProcessor 输入prev.setDataEncoding("UTF-8"); 2.当响应数据或响应页面没有设置编码时,jme ...
- Android 使用SwipeActionAdapter开源库实现简单列表的左右滑动操作
我们做listview左右滑动操作时,一般中情况下,都是像QQ那样,左滑弹出操作菜单(删除.编辑),然后选择菜单操作: 这样的效果不可谓不好,算是非常经典. 另外,有少数的APP,尤其是任务管理类的A ...
- 如何用Chrome浏览器下载网页音乐视频
打开网页,先让要下载的视频播放,右键单击选择审查元素(F12),选择上方的Network选项,按F5刷新,这个时候我们可以看到框架中Size下的不少文件数据数字正在变大,按size降序排列.点击表格的 ...