当父项在 x 轴上太小时，如何使嵌套 div 可滚动？

Question

我正在尝试在具有相对宽度的父级 div 中使用固定宽度的嵌套 div。

重点是，嵌套的 div 应始终具有固定宽度。如果父级的宽度较小，则嵌套应具有 x 滚动条，因此其可见部分将小于其固定宽度。

jsFiddle 会有所帮助：https://jsfiddle.net/ycLvc2c8/1/

HTML

<div class="parent">
    <div class="nested">
    012345678901234567890123456789z // 31 ch long
    </div>
</div>

CSS

.parent {
    background-color: red;
    height: 100px;
    padding-top: 10px;
    width: 70%;
}

.nested {
    width: 30ch;
    max-width: 100%;
    overflow-x: scroll;
    background-color: orange;
    font-family: monospace;
}

我想要的是最后的 'z' 应该总是写在第二行，因为嵌套的 div 应该有 30 个字符长。当你减小 window 宽度时，嵌套的可见部分会变小，但仍然 'z' 应该在第二行，第一行的所有数字都带有滚动条。

我希望这已经够清楚了:)

感谢您的帮助

Answer 1

如果我的解释正确，只需将 word-break: break-word; 添加到 .nested CSS 即可强制 'z' 换行。

Answer 2

这是您要找的吗？

.parent {
    background-color: red;
    height: 100px;
    padding-top: 10px;
    overflow-x: scroll;
    width: 70%;
}

.nested {
    width: 30ch;
    background-color: orange;
    font-family: monospace;
    word-wrap: break-word;
}

https://jsfiddle.net/r39woave/

Answer 3

jaunt说的方法可以解决标点问题，但是还是有问题

如果父div的宽度太小（比如width=20%），就会这样显示we can see that numbers will be display in second line

所以，我改进了方法https://jsfiddle.net/ycLvc2c8/3/

.parent {
    background-color: red;
    height: 100px;
    padding-top: 10px;
    width: 20%;
    overflow:scroll;
}
.nested {
    width: 30ch;
    /* max-width: 100%; */
    /* overflow-x: scroll; */
    background-color: orange;
    font-family: monospace;
    word-break: break-word;
}

希望对您有所帮助。

当父项在 x 轴上太小时，如何使嵌套 div 可滚动？

How to make nested div scrollable when parent is too small on x axis?

html

css

overflow