CSS处理文字段落尾行行末缩进，点击查看更多展开效果_CSS教程_CSS_脚本之家

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

善良的水煮鱼 · html中如何尾部缩进 | PingCode智库· 3 周前 ·

文武双全的钥匙扣 · CSS字体与文本属性详解· 3 周前 ·

慈祥的鸵鸟 · Chrome 134 版 DevTools ...· 2 周前 ·

忐忑的灯泡 · white-space - ...· 2 周前 ·

无邪的大熊猫 · scale() - CSS：层叠样式表 | MDN· 1 周前 ·

玩篮球的火龙果 · 广州、南昌、宁波、沈阳新增地铁运营线路· 2 月前 ·

狂野的柳树 · 一周曝光台 | ...· 2 月前 ·

想表白的羊肉串 · shellcode编写指南-腾讯云开发者社区 ...· 1 年前 ·

个性的豆浆 · 华尔街之狼 - 读书网|dushu.com· 2 年前 ·

仗义的火车 · 为什么不建议买宋PLUS ...· 2 年前 ·

html部分：

<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行末缩进内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！