css:在容器内文字超过容器范围,显示一行加省略号或者两行加省略号
一、显示一行加省略号:各浏览器兼容
.box{
width: 100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}.box需要是块级或行内块容器,padding为0(貌似可以加上下padding)
white-space:强制显示在一行;text-overflow:ellipsis:多余的以省略号代替;overflow:hidden:多余的文本隐藏
二、显示两行加省略号:仅适用于谷歌浏览器,同样不能加padding
.abcde{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
三、非谷歌浏览器,文字字数超出范围显示省略号,$('.ieover')为需要做如此处理的文本节点
$(document).ready(function(){
$(function(){
if(navigator.userAgent.toLowerCase().indexOf("chrome") == -1){
$('.ieover').each(function(i, obj){
var content;
if($(this).text().length>=110){
console.log("www")
content=$(this).text().substr(0,110)+'...';
console.log($(this).text().substr(0,110))
$(this).text(content)
}
});
}else{
}
})
});
css:在容器内文字超过容器范围,显示一行加省略号或者两行加省略号的更多相关文章
- [笔记]使用Go语言Redigo包在Docker容器内连接Redis容器的方法
Docker容器之间的连接可以带来不少方便,下面记录下如何在自己容器内通过环境变量连接与之连接的Redis容器的方法. 先起一个Redis的Docker容器,命名为 redis,再起一个自己的Dock ...
- css实现行内文字垂直居中
之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...
- css样式-区域内文字不会被选中
要注意浏览器的兼容性: -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
- css一div内文字居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 文字超过字符长度 显示… 点点点 jquery
在 script脚本区域里面定义如下方法 jQuery.fn.limit = function() { var self = $("[limit]"); self.each(fun ...
- 修改docker中mysql登入密码(包括容器内和本地远程登入的密码)
查看docker中正在运行的容器 docker ps 进入MySQL 容器中 sudo docker exec -it cd800a1cd503 /bin/bash 在容器中: /etc/mysql/ ...
- 只用CSS实现容器内图片上下左右居中
一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...
- javascript超过容器后显示省略号效果(兼容一行或者多行)
javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...
- html中的div、td 、p 等容器内强制换行和不换行的实现
div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:< ...
随机推荐
- dubbo服务telnet命令
转载 https://www.cnblogs.com/feiqihang/p/4387330.html dubbo服务发布之后,我们可以利用telnet命令进行调试.管理.Dubbo2.0.5以上版本 ...
- hadoop ha环境下的datanode启动报错java.lang.NumberFormatException: For input string: "10m"
hadoop ha环境启动start-dfs.sh的时候datanode启动不了,并且报错. [hadoop@datanode2 ~]$ cat /home/hadoop/hadoop-2.7.3/l ...
- Ribbon Workbench 与此流程相关的流程操作未激活
问题描述:使用Ribbon Workbench 打开解决方案时报 :与此流程相关的流程操作未激活 解决方法 :ribbon 导航--系统定置--流程中心--流程--CustomiseRibbon -- ...
- windows服务没有及时响应启动或控制请求
单击开始,单击运行,键入regedit,然后单击“确定”. 找到并单击以下注册表子项:HKEY_LOCAL_MACHINE——SYSTEM——CurrentControlSet——Control 在右 ...
- windows gitbook pdf
1.安装 nodejs 下载地址:https://nodejs.org/download/release/v6.9.2/node-v6.9.2-x64.msi 执行安装 配置环境变量:C:\Progr ...
- 微信小程序学习笔记1--小程序的代码构成
最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...
- Solr高效利用:Solr实现SQL的查询与统计
1.如何高效使用Solr查询功能 ?2.单个字段分组统计如何实现? 3.IN条件查询有几种方式? 4.多个字段分组统计是否只支持count? Cloudera公司已经推出了基于Hadoop平台的查询统 ...
- Java 1.ExecutorService四种线程池的例子与说明
1.new Thread的弊端 执行一个异步任务你还只是如下new Thread吗? new Thread(new Runnable() { @Override public void run() { ...
- SpringBoot在Kotlin中的实现(二)
根据现在的开发模式和网上的一些资料,SpringBoot需要对业务和操作进行分层,通常分为controller.entity.service.respository等结构.下面以Kotlin官网的例子 ...
- spring-data-redis 中使用RedisTemplate操作Redis
Redis 数据结构简介 Redis可以存储键与5种不同数据结构类型之间的映射,这5种数据结构类型分别为String(字符串).List(列表).Set(集合).Hash(散列)和 Zset(有序集合 ...