纯css实现多行文本右下角最后一行展示全部按钮

未展开全部:

展开全部:

综上演示按钮始终保持在最下方

css代码如下:

html 复制代码
<div class="info-content">
	<div class="info-text" :class="!showAll ? 'mle-hidden' : ''">
		<span class="show-all" @click="handleShowAll">
			{{ showAll ? "收起" : "展开" }}
            <span class="arrow" :class="showAll ? 'active' : ''"></span>
		</span>
	    【预置内容】质量标签信息内容信息质量标签内容质量标签信息内容信息质量标签内容
	</div>
</div>

css代码如下:

css 复制代码
.info-content {
	padding: 10px 0;
	margin: 0 16px;
	display: flex;
	.info-text {
		font-weight: 400;
		font-size: 14px;
		color: #919191;
		&:before {
			content: "";
			float: right;
			width: 0;
			height: calc(100% - 16px);
			background: red;
		}
		&.mle-hidden {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	    .show-all {
		    float: right;
		    clear: both;
		    font-weight: 500;
		    font-size: 14px;
		    color: #61afff;
		    cursor: pointer;
		    margin-top: -4px;
	        .arrow {
		        display: inline-block;
		        width: 6px;
		        height: 6px;
		        border-left: 2px solid #61afff;
		        border-bottom: 2px solid #61afff;
		        transform: translateY(-30%) rotate(-45deg);
		        margin: 0 4px;
		        transition: all ease-in-out 0.3s;
		        &.active {
			        transform: rotate(135deg);
		        }
	        }
        }
    }
}

最主要的是使用伪元素before把按钮顶下来,始终在最后一行

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui