收藏
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文本超出隐藏</title>
<style type="text/css">
body,ul,p{margin: 0; padding: 0; }
body{background: #f0f0f0;}
a{text-decoration: none;}
.wrap{width: 768px; margin: 88px auto;}
/* 文章列表 */
.box{padding-right: 16px; }
ul.txt li{ background-color: #fff; margin-bottom: 16px; padding: 6px; }
ul.txt li:after{content: ''; display: block; clear: both; height: 0; }
.menuArticle-detail-img{float: left; width: 156px; height: 156px; background-color: #abcdef; overflow:hidden;}
.menuArticle-detail{position: relative; float:right; height: 156px; padding-left:16px; width: 568px; }
p.menuArticle-detail-title a{color: #333; font-size: 18px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
p.menuArticle-detail-show{margin-top: 12px; }
p.menuArticle-detail-show a{font-size: 12px; color: #575757; display: block; height: 34px; line-height: 17px; overflow: hidden; }
p.menuArticle-detail-foot{position: absolute; bottom: 8px; left: 0; padding-left: 16px; padding-right: 6px; width: 568px; font-size: 14px; }
p.menuArticle-detail-foot span.news-foot-left{float: left; }
p.menuArticle-detail-foot span.news-foot-right{float: right; }
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<ul class="txt">
<li>
<div class="menuArticle-detail-img">
<a href="" target="_blank">
<img src="" alt="资讯标题" width="156" height="156">
</a>
</div>
<div class="menuArticle-detail">
<p class="menuArticle-detail-title">
<a href="" target="_blank">标题!</a>
</p>
<p class="menuArticle-detail-show" >
<a href="" target="_blank" class="news-list">
内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容
</a>
</p>
<p class="menuArticle-detail-foot">
<span class="news-foot-left">2018-09-11 18:31:31</span>
<span class="news-foot-right">88人浏览</span>
</p>
</div>
</li>
</ul>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// 二级菜单文章列表
// 作用于多个元素
var newsList = $(".news-list")
var le = null;
var newsArr = new Array();
newsList.each(function(k,v){
newsArr[k] = ""+$(v).text();
// 去掉字符串内容左边的空格
newsArr[k] = newsArr[k].replace(/^\s*/,'');
newsArr[k] = newsArr[k].substring(0,66)+"...";
console.log(newsArr[k])
})
newsList.each(function(k,v){
$(v).text(newsArr[k]);
})
// 针对一个元素
var newsList = $("#news-list")
var le = newsList.text()+"";
//去掉字符串左边空格
// le = le.replace(/^\s*/,'');
// 去掉字符串所有空格
le = le.replace(/\s+/g,"");
le = le.substring(0,68)+"...";
newsList.text(le)
//去掉字符串右边空格
// le = le.replace(/(\s*$)/g, "")
//去掉字符串两头空格
// le = le.replace(/^\s+|\s+$/g,"");
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<div class="wrap"> <div class="box"> <ul class="txt"> <li> <div class="menuArticle-detail-img"> <a href="" target="_blank"> <img src="" alt="资讯标题" width="156" height="156"> </a> </div> <div class="menuArticle-detail"> <p class="menuArticle-detail-title"> <a href="" target="_blank">标题!</a> </p> <p class="menuArticle-detail-show" > <a href="" target="_blank" class="news-list"> 内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容内容内容 内容内容,内容内 容内容 内容内容内容内容内,容内容内容内容 </a> </p> <p class="menuArticle-detail-foot"> <span class="news-foot-left">2018-09-11 18:31:31</span> <span class="news-foot-right">88人浏览</span> </p> </div> </li> </ul> </div> </div>
<style type="text/css">
body,ul,p{margin: 0; padding: 0; }
body{background: #f0f0f0;}
a{text-decoration: underline;}
.wrap{width: 768px; margin: 88px auto;}
/* 文章列表 */
.box{padding-right: 16px; }
ul.txt li{ background-color: #fff; margin-bottom: 16px; padding: 6px; }
ul.txt li:after{content: ''; display: block; clear: both; height: 0; }
.menuArticle-detail-img{float: left; width: 156px; height: 156px; background-color: #abcdef; overflow:hidden;}
.menuArticle-detail{position: relative; float:right; height: 156px; padding-left:16px; width: 568px; }
p.menuArticle-detail-title a{color: #333; font-size: 18px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
p.menuArticle-detail-show{margin-top: 12px; }
p.menuArticle-detail-show a{font-size: 12px; color: #575757; display: block; height: 34px; line-height: 17px; overflow: hidden; }
p.menuArticle-detail-foot{position: absolute; bottom: 8px; left: 0; padding-left: 16px; padding-right: 6px; width: 568px; font-size: 14px; }
p.menuArticle-detail-foot span.news-foot-left{float: left; }
p.menuArticle-detail-foot span.news-foot-right{float: right; }
</style><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// 二级菜单文章列表
// 作用于多个元素
var newsList = $(".news-list")
var le = null;
var newsArr = new Array();
newsList.each(function(k,v){
newsArr[k] = ""+$(v).text();
// 去掉字符串内容左边的空格
newsArr[k] = newsArr[k].replace(/^\s*/,'');
newsArr[k] = newsArr[k].substring(0,66)+"...";
console.log(newsArr[k])
})
newsList.each(function(k,v){
$(v).text(newsArr[k]);
})
// 针对一个元素
var newsList = $("#news-list")
var le = newsList.text()+"";
//去掉字符串左边空格
// le = le.replace(/^\s*/,'');
// 去掉字符串所有空格
le = le.replace(/\s+/g,"");
le = le.substring(0,68)+"...";
newsList.text(le)
//去掉字符串右边空格
// le = le.replace(/(\s*$)/g, "")
//去掉字符串两头空格
// le = le.replace(/^\s+|\s+$/g,"");
</script>单行文本超出隐藏：
display: block; //主要是该元素要有宽度值
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
js 去除字符串中的空格原文链接：
https://www.cnblogs.com/kongxc/p/6959048.html
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
