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/ ...
随机推荐
- python正则表达式应用 去掉标点符号
- Liferay 7 module项目的依赖问题
build.gradle中的dependencies和bnd.bnd的Private-Package的关系是,build.gradle解决编译时候所需的所有依赖问题,但是这些依赖并不会被打包到buil ...
- 【JZOJ4811】【NOIP2016提高A组五校联考1】排队
题目描述 输入 输出 样例输入 5 4 1 2 1 3 3 4 3 5 1 4 2 4 1 2 2 5 样例输出 3 1 1 2 数据范围 样例解释 解法 可推知原树可以转换为一个序列,即优先序列: ...
- Directx11教程(21) 修正程序最小化异常bug
原文:Directx11教程(21) 修正程序最小化异常bug 很长时间竟然没有注意到,窗口最小化时候,程序会异常,今天调试水面程序时,随意间最小化了窗口,发现程序异常了.经过调试,原来程 ...
- shell学习(22)- comm
1.预备知识 comm命令可用于比较两个已排序的文件.它可以显示出第一个文件和第二个文件所独有的行以及这两个文件所共有的行.该命令有一些选项可以禁止显示指定的列,以便于执行交集和求差操作. 交集(in ...
- laravle 事务
DB::beginTransaction(); try{ $name = 'abc'; $result1 = Test::create(['name'=>$name]); ...
- php输入流简单小例子
<form method="post" action="index.php/home/index/captchaTest"> <input n ...
- git操作——TortoiseGit指定某个分支clone
需求 需要使用TortoiseGit 克隆某个项目分支 操作 勾选分支,输入分支名称clone代码即可
- Python操作pymysql写入数据库时的错误
错误一 InternalError: (pymysql.err.InternalError) (1366, "Incorrect string value: '\\xE6\\xAD\\xA3 ...
- JavaWeb登录、注销、退出、记住用户名和密码
应该是保存在Cookie里,session是放在服务器的内存里的.在用户关闭了网页窗口后,session就清空了.而Cookie是保存在用户的IE临时文件夹中的,再次登录时,读取其中的值传给服务器. ...