js内容溢出用省略号（...）表示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<style type="text/css">
.line{
width:100px;
height:20px;
background: blanchedalmond;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.block{
width: 250px;
background: greenyellow;
}
</style>
<body>
<section class="line">
boom clap you can you up!come on!
</section>
<section class="block">
the day you went the way .l lose my life!call me cray call me back,call sofarling the day you went the day
</section> </body>
<script type="text/javascript">
var wordlimit=function(){
$(".block").each(function(){
var copythis=$(this.cloneNode(true)).hide().css({
'position':'absolute',
'width':'auto',
'overflow':'visible'
});
$(this).after(copythis);
if(copythis.width()>$(this).width()){
$(this).text($(this).text().substring(0,$(this).html().length-4));
$(this).html($(this).html()+'...');
copythis.remove();
wordlimit();
}
else{
copythis.remove();
return;
}
});
}
wordlimit();
</script>
</html>
js内容溢出用省略号（...）表示的更多相关文章
- css如何实现多行文本时,内容溢出,出现省略号
一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...
- 关于client浏览器界面文字内容溢出用省略号表示方法
在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省 ...
- CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
随机推荐
- B/S 工业互联网 地铁行业
前言 近几年,互联网与交通运输的融合,改变了交易模式,影响着运输组织和经营方式,改变了运输主体的市场结构.模糊了运营与非营运的界限,也更好的实现了交通资源的集约共享,同时使得更多依靠外力和企业推动交通 ...
- Java-Thread01之创建线程
------  ...
- xamarin开发的mac开发小工具集合
兄弟们我拖控件拖到了mac系统去了, 工具上传到百度网盘,下载地址 链接:https://pan.baidu.com/s/1Q64zoRjE3u66jJnzF8rhww提取码:ljx2 这款工具我是用 ...
- 六、springboot 简单优雅是实现短信服务
前言 上一篇讲了 springboot 集成邮件服务,接下来让我们一起学习下springboot项目中怎么使用短信服务吧. 项目中的短信服务基本上上都会用到,简单的注册验证码,消息通知等等都会用到.所 ...
- spring boot项目下的application.properties中的logging.level设置日志级别
日志级别 trace<debug<info<warn<error<fatal 默认级别为info,即默认打印info及其以上级别的日志,如下: logging.level ...
- Jmeter Json List Element Assertion使用详解
使用背景: jmeter4.0本身提供json Assertion断言,但当我们想要对返回的json list中的多个字段进行断言的时候,我们就会感到很无力.那么此时我们就可以通过Json List ...
- DRF框架学习总结
DRF框架安装配置及其功能概述 Django与DRF 源码视图解析 DRF框架序列化和返序列化 DRF框架serializers中ModelSerializer类简化序列化和反序列化操作 DRF源码s ...
- .NET Core 3.0 ，WTM 2.3.9发布
.Net Core 3.0已经来了,WTM怎么可以落后呢.最新发布的WTM2.3.9版本已经支持.Net Core 3.0啦,现在在线生成项目的时候可以选择2.2和3.0两个版本.小伙伴们快来体验吧. ...
- 渗透测试-基于白名单执行payload--Compiler
复现亮神课程 0x01 Compiler前言 说明:Microsoft.Workflow.Comiler.exe是.NET Framework默认自带的一个实用工具,用户能够以XOML工作流文件的形式 ...
- [USACO10NOV]购买饲料Buying Feed 单调队列优化DP
题目描述 约翰开车来到镇上,他要带 KKK 吨饲料回家.运送饲料是需要花钱的,如果他的车上有 XXX 吨饲料,每公里就要花费 X2X^2X2 元,开车D公里就需要 D×X2D\times X^2D×X ...