Flex布局下如何在另一区块出现时实现文本渐隐效果？

不用position: absolute也能搞定需求，借助CSS遮罩（mask）和Flex布局的特性就能实现，具体代码调整如下：

修改后的CSS代码 #

.kt-portlet__head {
  display: flex;
  justify-content: space-between;
  position: relative;
  gap: 1rem; /* 标题与按钮间留间距，避免渐变紧贴按钮 */
}

.kt-portlet__head-label {
  display: flex;
  align-items: center;
  flex: 1; /* 让标题容器占据按钮以外的全部可用空间 */
  overflow: hidden; /* 隐藏超出容器的文本 */
}

.kt-portlet__head-label h3 {
  margin: 0;
  white-space: nowrap; /* 强制文本保持单行 */
  /* 用CSS遮罩实现从实到虚的渐隐效果，可调整百分比控制渐变范围 */
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%); /* 兼容webkit内核浏览器 */
}

.kt-portlet__head-toolbar {
  display: flex;
  align-items: center;
  align-content: flex-end;
  flex-shrink: 0; /* 固定按钮容器宽度，防止被压缩 */
}

方案说明 #

• flex:1 让标题容器自动填充按钮以外的空间，保证按钮始终固定在右侧且不被挤压；
• overflow:hidden 截断超出容器的文本，配合white-space:nowrap确保文本保持单行展示；
• CSS遮罩（mask）通过渐变实现文本右侧渐隐，无需额外定位元素，完全适配现有Flex布局，不会对模板其他部分产生副作用；
• flex-shrink:0 保护按钮容器不会因空间不足被压缩变形。

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