纯css实现文本隐藏（全兼容版本和非全兼容版本）cv就能用！！！

最新推荐文章于 2024-09-21 23:59:03 发布

柑橘乌云_

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量212

点赞数 3

分类专栏： css特效+canvas等炫酷功能demo 文章标签： css rpc 前端

本文链接：https://blog.csdn.net/m0_57033755/article/details/137766878

版权

功能demo 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css特效+canvas等炫酷

6 篇文章 0 订阅

订阅专栏

文章介绍了如何在HTML和CSS中实现浮动元素的定位以及内容的可展开/收起功能，使用了两种不同的方法：一种是基于Flexbox的现代浏览器兼容方式，另一种是使用CSS3专有属性`-webkit-line-clamp`实现，展示了兼容不同浏览器的解决方案。

摘要由CSDN通过智能技术生成

先贴效果图：

兼容版本:

	<!DOCTYPE html>
	<html lang="zh-CN">
		<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">

			<title>Document</title>
		</head>

		<body>
			<div class="wrap">
				<input type="checkbox" id="exp" style="display: none;">
				<div class="text">
					<label class="btn" for="exp"></label>
					浮动元素是如何定位的
					正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
				</div>
			</div>
		</body>

		<style>
	* {
		padding: 0;
		margin: 0;
		border: none;
		line-height: 1;
	}

	.text {
		/* // display: -webkit-box; */
		/* // -webkit-line-clamp: 3; */
		/* // -webkit-box-orient: vertical; */
		line-height: 1.5;
		max-height: 4.5em;
        /* 要n行文本隐藏就max-height写 n*1.5 em */
		overflow: hidden;
		position: relative;
	}

	.btn {
		float: right;
		clear: both;
		position: relative;
		margin-left: 20px;
		font-size: 16px;

		background: #3F51B5;
		border-radius: 4px;
		color: #fff;
		cursor: pointer;
		border: 0;
		overflow: visible !important;
	}

	.text::before {
		content: '';
		float: right;
		width: 0;
		/* // background: red */
		height: calc(100% - 20px);
		/* // height: 100%; */
		/* // margin-bottom: -20px; */
	}

	.wrap {
		display: flex;
		/* //解决.text::before 高度100%不生效问题 */
	}

	.btn::before {
		content: '...';
		position: absolute;
		left: -18px;
		color: #333;
		/* // transform: translateX(-100%) */
	}

	#exp:checked + .text {
		/* -webkit-line-clamp: 999; */
		max-height: none;
		/* // 设置一个足够大的行数就可以了 */
	}

	.btn::after {
		content: '展开'
			/*采用content生成*/
	}

	#exp:checked + .text .btn::after {
		content: '收起'
	}

	#exp:checked + .text .btn::before {
		visibility: hidden;
		/*在展开状态下隐藏省略号*/
	}

	.text {
		transition: .3s max-height;
	}

	#exp:checked + .text {
		max-height: 500px;
		/*超出最大行高度就可以了 或者直接设置为none。 max-height: none;*/
	}

    /* 下面是解决如果文本不足行数也就是不省略时候，展开按钮依旧存在的问题 */
	.text::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background: #fff;
	}

	#exp:checked + .text::after {
		visibility: hidden;
	}
		</style>
	</html>

非兼容版本：

	<!DOCTYPE html>
	<html lang="zh-CN">
		<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">

			<title>Document</title>
		</head>

		<body>
			<div class="wrap">
				<input type="checkbox" id="exp" style="display: none;">
				<div class="text">
					<label class="btn" for="exp"></label>
					浮动元素是如何定位的
					正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
				</div>
			</div>
		</body>

		<style>
	* {
		padding: 0;
		margin: 0;
		border: none;
		line-height: 1;
	}

	.text {
		font-size: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: justify;
		/* display: flex; */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		position: relative;
	}

	.btn {
		float: right;
		clear: both;
		position: relative;
		margin-left: 20px;
		font-size: 16px;

		background: #3F51B5;
		border-radius: 4px;
		color: #fff;
		cursor: pointer;
		border: 0;
		overflow: visible !important;
	}

	.text::before {
		content: '';
		float: right;
		width: 0;
		/* // background: red */
		height: calc(100% - 16px);
		/* // height: 100%; */
		/* // margin-bottom: -20px; */
	}

	.wrap {
		display: flex;
		/* //解决.text::before 高度100%不生效问题 */
	}

	.btn::before {
		content: '展开';
	}

	#exp:checked + .text .btn::before {
		content: '收起'
	}

	#exp:checked + .text::after {
		visibility: hidden;
	}

	#exp:checked + .text {
		-webkit-line-clamp: 999;
		/*设置一个足够大的行数就可以了*/
	}

/* 下面是解决如果文本不足行数也就是不省略时候，展开按钮依旧存在的问题 */
	.text::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background: #fff;
	}
	
	.exp:checked+.text::after{
	    visibility: hidden;
	}
		</style>
	</html>

思路来源于阅文前端团队