<div class="text-spread-container">
    <div class="text">我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字</div>
    <div class="btn">...查看更多</div>
父元素固定容器：
.text-spread-container {
position: relative;
overflow: hidden;
max-height:100px;
子元素文字容器：
.text{
color: #1f1f1f;
line-height: 0.22rem;
查看更多按钮CSS:
.btn {
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
background-color: #fff;
利用伪类视觉看起来有渐变淡出效果
.btn:before {
position: absolute;
right: 100%;
content: "";
width:0.16rem;
height:0.22rem;
background-image: linear-gradient(270deg,#fff,hsla(0,0%,100%,0));
我们可以通过判断.text元素的高度 是否大于父元素的max-height 100px 来控制查看更多按钮的显隐，当点击查看更多切换时，父元素高度改为和子元素通高，或者去除/添加overflow-hidden属性即可。
到此这篇关于CSS处理文字段落尾行行末缩进，点击查看更多展开效果的文章就介绍到这了,更多相关css行末缩进内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
2024-03-20
2024-03-19
2024-03-15
2024-03-15
2024-03-20
2024-03-19
2024-03-15
2024-03-15
2023-02-22
2023-02-12
2022-11-29
2022-07-02
电脑版 - 返回首页
2006-2024 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号