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 ...
随机推荐
- JS 点击复制Copy
1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 va ...
- C++ namespace功能总结
案例背景:你写了一些代码,其中有一个函数名为xyz(),同时另一个可用库里也有一个同名的函数xyz(), 编译器没有办法知道你指的是哪个版本的xyz(). 解决办法:A namespace is de ...
- Django中使用ModelForm实现Admin功能
接上一篇<Django中使用Bootstrap> ModelForm 可以将数据库中的信息展示在一个表中,因此我们在查询数据库信息时可以使用ModelForm在前端展示查询到的信息. 在上 ...
- iptables允许FTP
在iptables里设置允许访问ftp(建立连接,数据传输) 由于ftp服务在建立连接和传输数据时,使用的时不同的端口,建立连接的端口20.21,数据传输的端口可以自定义: 修改ftp配置文件,指定用 ...
- 第三次冲刺spring会议(第四次会议)
[例会时间]2014/5/23 21:15 [例会地点]9#446 [例会形式]轮流发言 [例会主持]马翔 [例会记录]兰梦 小组成员:兰梦 ,马翔,李金吉,赵天,胡佳奇
- intellij中javax包的导入
新建intellij的maven web想项目的时候,出现的问题,import javax.servlet.http相关的包出错 好久不搭建也好久没用intellij了,都忘了,在这里笔记一下 再次吐 ...
- 使用solrj查询数据(java代码)
实体类Student,添加Field注解 package com.cs.solr.entity; import org.apache.solr.client.solrj.beans.Field; pu ...
- ajax传递的数据类型json传递
$(".del_goods").click(function(){ //删除选中的商品 var clear_data = [];//数组 $("input[name='c ...
- php练习1
<?php$conn=mysqli_init();if(!conn){ echo "mysqli_init error"; exit(0);}$ret=mysqli_real ...
- 12C expdp issue
issue 1: 使用expdp时遭遇ora-31650 D:\oracle\diag\rdbms \trace>expdp \"/ as sysdba\" schemas ...