移动端如何隐藏分类归档页面标题特效的溢出内容？

嗨，刚接触Stack和CSS完全不用不好意思～我看了你的代码，发现几个小问题导致样式没达到预期，咱们一步步来修正：

代码里的核心问题 #

• text-shadow语法错误：你写的0 0 px、-px 0这些写法不对，px前面必须加具体数值（比如2px），不然浏览器会直接忽略这些无效的阴影规则。
• 无效的white-space值：white-space: wrap不是合法属性值，如果你想让背景文字不换行，应该用white-space: nowrap；如果需要自动换行适配容器，用white-space: normal就可以。
• 定位依赖缺失：伪元素用了position: absolute，但如果.page-title本身没设置position: relative，伪元素会相对于页面根元素定位，位置肯定会跑偏。
• 溢出控制没到位：你试过overflow:hidden但没生效，大概率是没把它加对元素——得给.page-title加上，这样伪元素的大文字才会被限制在标题容器内，不会乱跑。

修正后的代码 #

/* 先给标题本身设置相对定位和溢出隐藏，确保伪元素定位正确 */
.archive .page-title, .page .page-title {
  position: relative;
  overflow: hidden;
  /* 这里可以保留你原来的标题基础样式，比如内边距、文字颜色等 */
}

.archive .page-title::after, .page .page-title::before {
  content: attr(title);
  position: absolute;
  z-index: -1;
  top: -7%;
  bottom: 0;
  width: 100%;
  height: 100%;
  white-space: nowrap; /* 修正为合法值，避免背景文字换行 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(50px, 15vw, 200px);
  font-weight: 800;
  line-height: 1;
  color: var(--paletteColor7);
  /* 补全text-shadow的数值，这里给了合理的偏移和模糊值，你可以按需调整 */
  text-shadow: 
    0 0 2px rgba(255, 255, 255, 0.4),
    -1px 0 rgba(255, 255, 255, 0.1),
    0 1px rgba(255, 255, 255, 0.1),
    1px 0 rgba(0, 255, 170, 0.1),
    0 -1px rgba(255, 255, 255, 0.1);
}

额外小提示 #

• 我把标题本身的样式和伪元素样式分开写了，结构更清晰，也能确保定位和溢出控制生效。
• 如果背景文字还是有溢出或者位置不对的情况，可以试试微调top的百分比，或者给伪元素加transform: scale(0.9)来缩小适配容器。

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