CSS单行、多行文本溢出显示省略号(……)
这个问题经常遇到
1、单行文本溢出显示省略号(…)
text-overflow:ellipsis-----部分浏览器还需要加宽度width属性
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
2、多行文本溢出显示省略号,WebKit浏览器或移动端的页面
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
3、兼容各种浏览器的jQuery插件-jQuery.dotdotdot(https://github.com/FrDH/jQuery.dotdotdot)
这个用起来很简单,js加
$(function(){
$("#div1").dotdotdot({});
})
css里设置宽高,宽控制换行,高控制显示几行。
CSS单行、多行文本溢出显示省略号(……)的更多相关文章
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- css实现多行文本溢出显示省略号(…)
WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- 《CSS实现单行、多行文本溢出显示省略号》
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方式: overflow: hidden; te ...
随机推荐
- html5权威指南:用元数据元素说明文档
用元数据元素说明文档: html meta标签使用总结:http://www.cnblogs.com/lovesong/p/5745893.html html中meta标签使用介绍:http://ww ...
- Spring Security(03)——核心类简介
目录 1.1 Authentication 1.2 SecurityContextHolder 1.3 AuthenticationManager和Authentication ...
- ubuntu 操作系统相关操作
查看操作系统位数 命令: getconf LONG_BIT root@hbg:/# getconf LONG_BIT 64 查看操作系统信息 命令: lsb_release -a root@hbg: ...
- FZU 1893 内存管理 模拟
比赛的时候队友要做这道题…… 他没做出来自己也被误导了…… 也算是个教训 自己还是要有自己的思路…… 又是模拟题…… 网上都是用vector做的 我最近才会stl 怎么会用那么高大上的的东西…… 强力 ...
- Business Intelligence(BI) 商务智能
商业智能技术正是一种能够帮助企业迅速地完成信息采集.分析的先进技术.它以数据仓库(Data Warehousing).在线分析处理(OLAP).数据挖掘(Data Mining)3种技术的整合为基础, ...
- 洛谷-A+B Problem-洛谷的第一个任务
题目描述 Description 输入两个整数a,b,输出它们的和(a,b<=10^9) 输入输出格式 Input/output 输入格式:两个整数以空格分开输出格式:一个数 输入输出样例 ...
- ECOS-Ecstore 后台管理地址修改
ECStore默认出厂的后台管理地址是: http://域名/index.php/shopadmin http://域名/shopadmin [配置过rewrite后,并开启伪静态] 如果想要更个性的 ...
- 【实验室笔记】C#上位机学习笔记
用C#编写上位机,基本流程是[1]串口配置,[2]串口发送数据,[3]串口接收数据. [1]串口配置 串口的属性配置包括: No.1串口端口号 No.2串口波特率 No.3串口数据位 No.4串口停止 ...
- 重识 CSS
- kindle网络爬虫续集
简单介绍: 这次我们要爬的网页是:Kindle商店中的今日特价书,其中每周/每月特价书同理,就不再重复了选择这个网页的原因有两个:一是实用,很多人都会经常去看看Kindle特价书有没有自己喜欢的:二是 ...