父元素的 overflow:hidden 只对某个子元素有效

场景描述:

在父元素 div 内,包含一个子元素 div 和父元素的伪元素 ::after,伪元素需显示在父元素下方,而子元素仅需展示部分内容。因此,需实现对子元素 div 进行溢出隐藏,同时确保父元素的伪元素不受影响。有点抽象,举个 🌰。

HTML 结构:

html 复制代码
<div class="list-item">
  <div class="clipped"></div>
</div>

CSS 样式:

css 复制代码
.list-item {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ff788e;
  border-radius: 5px;
}

.clipped {
  transform: rotate(45deg);
  position: absolute;
  top: -15px;
  right: -15px;
  z-index: 1;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  background-color: #ff788e;
}

.list-item::after {
  content: '我是伪元素';
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffc4c4;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 5px;
  color: #ff5e79;
}

展示为:

如何实现呢?

第一反应肯定是添加属性 overflow: hidden,没错,那给谁添加呢?给最外层 div 也就是父元素添加?试试看!

css 复制代码
.list-item {
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ff788e;
  border-radius: 5px;
}

显然,标记问题解决,但是伪元素被隐藏,因为它也超出父元素的区域,那应该怎么办呢?

那就改变 HTML 结构,在需要隐藏的子元素外层嵌套一层 div,然后溢出隐藏,父元素保持可见。

HTML 结构:

html 复制代码
<div class="list-item">
  <div class="clip-wrapper">
    <div class="clipped"></div>
  </div>
</div>

CSS 样式:

css 复制代码
.list-item {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ff788e;
  border-radius: 5px;
}
.clip-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
}

.clipped {
  transform: rotate(45deg);
  position: absolute;
  top: -15px;
  right: -15px;
  z-index: 1;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  background-color: #ff788e;
}

.list-item::after {
  content: '我是伪元素';
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffc4c4;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 5px;
  color: #ff5e79;
}

OK,完美解决。

这是一个静态场景,但如果是动态组件场景,比如 Upload 组件本身呢,我们不能直接修改 HTML 结构,只能通过动态方式来处理样式和结构的调整。

举个 🌰,我需要在 Upload 组件上传后,下面添加文本「官网图片」。

目前展示为:

要求:

看完上面静态实现内容后,是不是感觉非常熟悉:

每一个图片都对应一个 li 元素,需要在 li 元素上添加伪元素"官网图片",但这样会导致右上角绿色的上传成功标记溢出。如图所示:

看一下元素结构,按照静态的方法书写。

一模一样的方法,只是将直接改变 HTML 结构变成了动态修改。

核心代码:

javascript 复制代码
/** 让溢出的✅显示在图片上 */
const renderSpecialUpload = async (hasAfter?: boolean, file?: { url: string }) => {
  await nextTick(); // 等待 DOM 渲染完成
  // 获取每个 li 元素
  const uploadContainer = uploadRef.value.$el as HTMLElement;
  if (!uploadContainer) return;

  const uploadItems = uploadContainer.querySelectorAll<HTMLLIElement>('.el-upload-list__item.is-success');

  uploadItems.forEach((item) => {
    // 上传图片不添加伪元素内容
    if (hasAfter && file && file.url) {
      const img = item.querySelector('img');
      if (img && img.src === file.url) {
        // 动态移除伪元素样式
        item.style.setProperty('--after-content', 'none');
      }
    }

    const label = item.querySelector('.el-upload-list__item-status-label');

    // 检查是否已经有外层容器,避免重复包裹
    if (label && label.parentElement && !label.parentElement.classList.contains('clip-wrapper')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'clip-wrapper';
      wrapper.style.overflow = 'hidden';

      // 将 label 包裹在新创建的 wrapper 中
      label.parentNode?.replaceChild(wrapper, label);
      wrapper.appendChild(label);
    }
  });
};

为什么多加了一个处理 img 的方法呢?为了实现新上传的图片不包含伪元素提示。

详细内容见:动态添加or删除「伪元素」-CSDN博客

最终展示为:

完美解决问题,┏(^0^)┛。

相关推荐
江号软件分享3 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享3 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海7 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子18 分钟前
深入理解TCP协议
前端·javascript·面试
万少19 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器