单行文字省略

很多时候不确定字数限制,但换行可能影响整体设计,这个时候常用就是文字省略加全文字提示了

.dom{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

多行文字省略

.dom{
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box; }

CSS 实现单行及多行文字省略的更多相关文章

  1. CSS实现单行与多行文字省略(truncation)

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  2. jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 关于css实现单行、多行省略标记

    实现单行: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 实现多行: display: -webkit-box; -we ...

  4. css实现单行(多行)文本溢出显示 ...

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...

  5. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  6. 【css】一行或者多行文字垂直水平居中

    1.方法一:使用css3弹性盒子(兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持) <!DOCTYPE html> <html> < ...

  7. Jquery : 上下滚动--单行 批量多行 文字图片翻屏【转】

    原文发布时间为:2010-02-01 -- 来源于本人的百度文章 [由搬家工具导入] 注:如果和左右滚动一起使用,则会出现冲突 一单行滚动(ad:http://www.gz138.com) <! ...

  8. css 之单行文本显示省略和多行文本省略

    一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...

  9. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. maven与sbt修改国内镜像

    一.idea中的maven 1.打开IntelliJ IDEA->Settings ->Build, Execution, Deployment -> Build Tools > ...

  2. IDEA 运行maven项目配置

  3. 【JZOJ4782】【NOIP2016提高A组模拟9.15】Math

    题目描述 输入 输出 样例输入 3 5 样例输出 -1 数据范围 解法 观察式子,可以得知整个式子与d(i*j)的奇偶性有关. d(n)为奇数当且仅当n是完全平方数. 对于一个i,如果d(i*j) ( ...

  4. spring boot + mybatis 访问 neo4j

    之前有通过rest的风格去访问,但是每次需要访问时候将statement一并加入header中去数据库执行,方式简单.且思路清晰,但是不便于形成模板调用,固采用mybaits来集成. 1.关键pom. ...

  5. python爬虫:一些爬虫常用的技巧

    1.基本抓取网页 get方法 import urllib2 url = "http://www.baidu.com" response = urllib2.urlopen(url) ...

  6. hdu 2412 Party at Hali-Bula【树形dp】

    HDU 2412 和poj 2342(hdu 1520)差不多,多了一个判断最优解是(Yes)否(No)唯一.关键问题也在这个判断最优解是否唯一上. 先定义dp[u][2],表示选(dp[][1])或 ...

  7. hdu 6201 【树形dp||SPFA最长路】

    http://acm.hdu.edu.cn/showproblem.php?pid=6201 n个城市都在卖一种书,该书的价格在i城市为cost[i],商人打算从某个城市出发到另一个城市结束,途中可以 ...

  8. Java练习 SDUT-1200_汉诺塔

    汉诺塔 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 汉诺塔(又称河内塔)问题是印度的一个古老的传说. 开天辟地的神勃 ...

  9. Linux下安装MySQL-python

    因为安装过程不断出现错误,备份.系统:linux ubuntupython版本:Python 2.7.3mysql版本:mysql  Ver 14.14 Distrib 5.5.35, for deb ...

  10. Mysql 数据库优化(一)

    一 避免网页访问错误 1  数据库连接timeout产生页面5xx错误 2 慢查询造成页面无法加载 3 阻塞造成数据无法提交 二 增加数据库的稳定性 三 优化用户体验 1 流畅的页面访问速度 2 良好 ...