flex实现多行多列-内容单行或者2行-超过2行显示省略号且文字居中

m0_37158404

已于 2022-06-09 17:01:06 修改

阅读量3k

点赞数

分类专栏： CSS应用 CSS 文章标签： css

于 2022-05-06 21:15:53 首次发布

原文链接：https://blog.csdn.net/billycoder/article/details/122640705

版权

CSS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

CSS应用

9 篇文章 0 订阅

订阅专栏

版权声明：本文为CSDN博主「billycoder」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/billycoder/article/details/122640705

效果图：

关键点：超出两行或多行显示省略号的盒子，外面再套一层flex盒子，这样就可以实现内容只有一行的时候，文字也可以垂直居中了（这里跟原文有所区别，原文用了三层，多余了，用两层容器就足够了）：；

代码如下 JS在线编辑器,JS在线运行,在线演示,调试测试代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
</head>
<style>
	* {
		margin: 0px;
		padding: 0px;
	}

	ul {
		width: 600px;
		height: 200px;
		background-color: pink;

		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}

	li {
		list-style: none;
		height: 60px;
		line-height: 20px;
		padding: 10px;
		width: 180px;
		box-sizing: border-box;
		/* border: 2px blue solid; */
		background-color: #dfdfdf;
		border-radius: 30px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

    /*注意white-space不能为nowrap*/
	.wrap {
		width: 140px;
		letter-spacing: 0;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 12px;
	}
</style>

<body>
	<ul>
		<li>
			<div class="wrap">我是文字随便几行我可以自动折行,水平居中多了不显示多了不显示多了不显示</div>
		</li>
		<li>
			<div class="wrap">水平居中</div>
		</li>
		<li>
			<div class="wrap">我是文字随便几行我可以自动折行,水平居中</div>
		</li>
        <li>
			<div class="wrap">我是文字随便几行我可以自动折行,水平居中多了不显示多了不显示多了不显示</div>
		</li>
		<li>
			<div class="wrap">水平居中</div>
		</li>
		<li>
			<div class="wrap">我是文字随便几行我可以自动折行,水平居中</div>
		</li>
        <li>
			<div class="wrap">我是文字随便几行我可以自动折行,水平居中多了不显示多了不显示多了不显示</div>
		</li>
		<li>
			<div class="wrap">水平居中</div>
		</li>
		<li>
			<div class="wrap">我是文字随便几行我可以自动折行,水平居中</div>
		</li>
	</ul>
</body>

</html>

m0_37158404

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
flex实现多行多列-内容单行或者2行-超过2行显示省略号且文字居中

版权声明：本文为CSDN博主「billycoder」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/billycoder/article/details/122640705效果图：关键点：超出两行或多行显示省略号的盒子，外面再套一层flex盒子，这样就可以实现内容只有一行的时候，文字也可以垂直居中了；代码如下：<!DOCTYPE html><html lang.
复制链接

扫一扫

专栏目录