CSS文本超出宽度无法换行滚动问题求助（附代码）

1. 修正DOM层级结构 #

首先要调整元素嵌套关系：把noteText放到textWrap内部，而非让两个元素同级绝对定位。这样滚动容器才能正确包裹文本，控制内容溢出。
正确结构示例：

<div class="note">
  <div class="textWrap">
    <div class="noteText">你的长文本内容</div>
  </div>
</div>

2. 调整CSS样式逻辑 #

将文本换行的控制样式统一放到滚动容器上，同时修正noteText的定位规则：

.note {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 250px;
    height: 300px;
    background-image: url("media/notebg.png");
    background-size: cover;
    animation: fadeIn 1s;
}

/* 滚动容器样式 */
.note > .textWrap {
    position: absolute;
    top: 50px;
    left: 10px;
    width: 200px;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    /* 新增换行控制 */
    white-space: pre-wrap;
    word-break: break-word;
}

/* 文本元素样式 */
.note .textWrap > .noteText {
    /* 移除绝对定位，让文本在容器内正常流动 */
    position: static;
    width: 100%;
}

3. 关键样式说明 #

• white-space: pre-wrap：保留文本原有换行的同时，允许内容自动换行
• word-break: break-word：确保超长单词也能被截断换行，避免横向溢出
• 移除noteText的绝对定位，让它作为子元素填充滚动容器，保证容器能正确计算内容高度触发滚动

额外检查点 #

• 确认CSS代码里的>是转义字符，实际要改成>，否则选择器会失效
• 核对textWrap的max-height值，确保内容超出时能正常触发垂直滚动

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