如何让图片上绝对定位的伪元素文本与主文本同步换行？

你的核心问题是绝对定位的伪元素脱离了文档流，无法继承父元素（.textOnPicture）的宽度约束，导致文本无法自动换行。可以通过以下调整让伪元素完全复刻主文本的布局：

关键修改点 #

• 给.textOnPicture添加position: relative，让伪元素的定位参考这个父元素
• 让伪元素继承主文本的所有排版属性（字体、字号、对齐方式等），确保换行逻辑一致
• 限制伪元素的宽度为100%，和主文本保持相同的宽度约束

修改后的CSS代码 #

#slide-container {
    width: 480px;
    height: 300px;
    background-image: var(--random-background-url);/*JS chooses a random picture*/
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px; /* 可选：给容器加内边距，避免文本贴边 */
}

.textOnPicture {
    z-index: 1; /* 提高主文本层级，确保在伪元素上方 */
    width: 100%;
    text-align: center;
    color: var(--random-text-on-picture-color);
    position: relative; /* 让伪元素以它为定位基准 */
    /* 确保伪元素继承字体属性，也可以显式设置 */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.textOnPicture::before {
    z-index: -1;
    -webkit-text-stroke: 0.03em var(--text-random-border-color);
    mix-blend-mode: multiply;
    content: var(--chosenPictureText);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 和主文本同宽 */
    text-align: inherit; /* 继承对齐方式 */
    font-family: inherit; /* 继承字体 */
    font-size: inherit; /* 继承字号 */
    line-height: inherit; /* 继承行高 */
}

额外说明 #

• 把主文本的z-index设为1，伪元素设为-1，确保主文本始终在上方
• 添加padding到容器是可选优化，避免文本直接贴到容器边缘
• 显式继承字体和排版属性是为了确保伪元素和主文本完全一致，即使后续修改主文本样式也不需要同步改伪元素

方案原理 #

通过让伪元素以相对定位的主文本为基准，并且完全继承主文本的宽度、排版属性，伪元素的文本会和主文本遵循完全相同的换行规则，自然不会超出容器范围。同时保留了你想要的描边效果，避免了多重阴影的弊端。

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