div 设置一行文字,文字超过后用...表示

博客展示了一段CSS代码,对.rightlist类进行样式设置,包括内边距、外边距、颜色、行高、边框等,还设置了文本溢出的处理方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

.rightlist {
    padding: 16px;
    margin-top: 2px;
    color: #333;
    line-height: 24px;
    border: 1px solid #ccc;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

实现 CSS 文字超过两行显示省略号(`...`),并在后面添加“展开/收起”按钮,需要结合 HTML、CSS 和 JavaScript 来完成。以下是完整的实现方案: --- ### ✅ 实现效果: - 默认只显示两行文字,超出部分用 `...` 表示; - 有一个“展开”按钮,点击后显示全部内容; - 再次点击“收起”按钮,恢复为两行。 --- ### ✅ 示例代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多行文本截断 + 展开收起</title> <style> .text-container { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 控制显示几行 */ overflow: hidden; line-height: 1.5; max-height: 3em; /* 2行 * 行高 */ position: relative; margin-bottom: 10px; } .text-container.full { -webkit-line-clamp: unset; max-height: none; } .toggle-btn { color: blue; cursor: pointer; text-decoration: underline; } </style> </head> <body> <div id="text" class="text-container"> 这是一段很长的测试文本,我们希望它在超过两行时被截断,并在末尾加上一个展开按钮。当用户点击展开后,应该能看到完整的内容。 </div> <span class="toggle-btn" onclick="toggleText()">展开</span> <script> const container = document.getElementById('text'); let isExpanded = false; function toggleText() { isExpanded = !isExpanded; if (isExpanded) { container.classList.add('full'); document.querySelector('.toggle-btn').textContent = '收起'; } else { container.classList.remove('full'); document.querySelector('.toggle-btn').textContent = '展开'; } } </script> </body> </html> ``` --- ### ✅ 代码解释: #### CSS 部分: - 使用 `-webkit-line-clamp` 控制最多显示的行数; - 使用 `display: -webkit-box` 和 `-webkit-box-orient: vertical` 来支持多行省略; - `.text-container.full` 是展开状态下的样式,取消限制; - `max-height` 用于辅助控制高度,避免动画或布局问题。 #### JS 部分: - 通过切换类名 `.full` 来控制是否展开; - 点击按钮时切换 `isExpanded` 的布尔值并更新按钮文字。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值