固定高度折叠文本移动端截断问题技术求助

嘿，我明白你遇到的麻烦了——桌面端用固定248px高度做折叠文本预览，通过JS移除max-height就能展示完整内容，但到了移动端文本却莫名被中间截断。咱们先揪出问题根源，再一步步搞定它。

问题到底出在哪？ #

看你的CSS代码，你同时用了max-height:248px和-webkit-line-clamp:3来实现多行截断效果。但这里有个坑：当你用JS移除max-height时，-webkit-line-clamp:3这个属性还留在元素上！这个属性的作用是强制文本只显示3行，不管容器高度有多高，这就是移动端文本被截断的核心原因。另外移动端屏幕尺寸小，原本的248px高度可能已经超出显示区域，但移除高度限制后行截断规则没取消，自然就出问题了。

具体解决方案 #

我们需要在切换展开/收起状态时，同时控制-webkit-line-clamp和max-height，而不是只修改其中一个。下面是调整后的完整代码：

1. 更新CSS样式 #

新增一个expanded类，专门用来处理文本展开后的状态，重置行截断和高度限制：

.collapsible-content {
    max-height: 248px;
    overflow: hidden;
    position: relative;
    margin-bottom: 4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 展开状态的专属样式 */
.collapsible-content.expanded {
    max-height: none;
    -webkit-line-clamp: unset; /* 取消强制行限制 */
    display: block; /* 重置布局方式，避免-webkit-box的影响 */
}

小贴士：我去掉了重复的overflow:hidden和没用的text-overflow:ellipsis——后者在多行截断场景下其实是和-webkit-line-clamp配合生效的，展开后完全不需要它。

2. 调整JavaScript逻辑 #

不再直接修改元素的style，而是通过添加/移除expanded类来切换状态，这样更清晰也更易维护：

// 获取页面元素
const collapsibleContainer = document.querySelector('.collapsible-container');
const content = collapsibleContainer.querySelector('.collapsible-content');
const btnReadMore = collapsibleContainer.querySelector('.toggle-text-more');
const btnReadLess = collapsibleContainer.querySelector('.toggle-text-less');

// 初始状态隐藏"收起"按钮
btnReadLess.style.display = 'none';

// 点击"展开"按钮的逻辑
btnReadMore.addEventListener('click', () => {
    content.classList.add('expanded');
    btnReadMore.style.display = 'none';
    btnReadLess.style.display = 'block';
});

// 点击"收起"按钮的逻辑
btnReadLess.addEventListener('click', () => {
    content.classList.remove('expanded');
    btnReadMore.style.display = 'block';
    btnReadLess.style.display = 'none';
});

3. 移动端适配优化（可选） #

如果觉得移动端初始折叠高度248px不合适，可以加个媒体查询，给小屏幕单独设置更适配的参数：

@media (max-width: 768px) {
    .collapsible-content {
        max-height: 180px; /* 移动端设置更紧凑的折叠高度 */
        -webkit-line-clamp: 2; /* 移动端只显示2行预览文本 */
    }
}

为什么这个方案能解决问题？ #

• 用类来管理状态，比直接修改style更规范，后续维护也更方便；
• 展开时同时取消-webkit-line-clamp和重置布局方式，确保文本能完整展示，不会被强制截断；
• 可选的媒体查询让移动端有更贴合屏幕的折叠效果，用户体验更好。

你可以直接套用这个方案试试，应该能完美解决移动端文本截断的问题。如果还有嵌套富文本的布局细节问题，再针对性调整CSS继承规则就好啦。

内容的提问来源于stack exchange，提问作者Juan Jardim