多行文本溢出显示省略号(...)的解决方案

最新推荐文章于 2024-03-18 08:00:00 发布

qq_45670012

最新推荐文章于 2024-03-18 08:00:00 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： web开发前端bug

原文链接：https://www.mk2048.com/blog/blog.php?id=h02i0jhjjhhj&title=%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E6%98%BE%E7%A4%BA%E7%9C%81%E7%95%A5%E5%8F%B7%28...%29%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

完美解决多行文本溢出显示省略号的解决方案

一、-webkit-line-clamp限制块元素显示的文本的行数

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>-webkit-line-clamp限制块元素显示的文本的行数</title>
	<style type="text/css">
		.figcaption{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
	</style>
	<!-- 
	适用范围：
		因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
		注：
		-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
		display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
		-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 
	-->
</head>
<body>	
	<div class="figcaption">
		完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题
	</div>
	<div class="figcaption">
		From the golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be shared with all who would take heed. In more recent times, this truth has been expressed as: April showers bring May flowers. This is a truth that promises light bursting from darkness, strength born from weakness and, if one dares to believe, life emerging from death.From the golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be shared with all who would take heed. In more recent times, this truth has been expressed as: April showers bring May flowers. This is a truth that promises light bursting from darkness, strength born from weakness and, if one dares to believe, life emerging from death.
	</div>
	<div class="figcaption">
		From 完美解决多行文本溢出显示省略号的问题the 完美解决多行文本溢出显示省略号的问题golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be 完美解决多行文本溢出显示省略号的问题shared with all who would take heed. In more recent times, this truth has been expressed as: April showers br完美解决多行文本溢出显示省略号的问题ing May flowers. This is a truth that promises light bursting from darkness, strength born 完美解决多行文本溢出显示省略号的问题 from weakness and, if one dares to believe, life emerging from death.
	</div>
</body>

</html>

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

二、完美解决多行文本溢出显示省略号的解决方案

（至于其他的两种方案实现多行文本溢出显示省略号，个人只能说ORZ。）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完美解决多行文本溢出显示省略号的问题</title>
    <style type="text/css">
        .figcaption {
            background: #EEE;
            width: 410px;
            height: 80px;
        }
        .figcaption p {
            margin: 0;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <div class="figcaption">
        <p>完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题</p>
    </div>
    <div class="figcaption">
        <p>From the golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be shared with all who would take heed. In more recent times, this truth has been expressed as: April showers bring May flowers. This is a truth that promises light bursting from darkness, strength born from weakness and, if one dares to believe, life emerging from death.</p>
    </div>
    <div class="figcaption">
        <p>From 完美解决多行文本溢出显示省略号的问题the 完美解决多行文本溢出显示省略号的问题golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be 完美解决多行文本溢出显示省略号的问题shared with all who would take heed. In more recent times, this truth has been expressed as: April showers br完美解决多行文本溢出显示省略号的问题ing May flowers. This is a truth that promises light bursting from darkness, strength born 完美解决多行文本溢出显示省略号的问题 from weakness and, if one dares to believe, life emerging from death.</p>
    </div>
</body>
    <script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.min.js"></script>
    <script>
        $(".figcaption").each(function(i){
            var divH = $(this).height();
            var $p = $("p", $(this)).eq(0);
            while ($p.outerHeight() > divH) {
                $p.text($p.text().replace(/(\s)*([a-zA-Z0-9] |\W)(\.\.\.)?$/, "..."));
            };
        });    
    </script>
</html>

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_45670012

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
多行文本溢出显示省略号(...)的解决方案

一、-webkit-line-clamp限制块元素显示的文本的行数 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
复制链接

扫一扫