html/css 中的换行和水平滚动

Question

我有一个包含许多小跨度的 div。我想要一个水平滚动条，其中行一直延伸到换行符标记（每行上的 a-z 带有水平滚动条以在窄屏幕上查看整行）。

我已将溢出样式添加到 div 并将其设置为“自动”，但内容总是被挤压到 div 中并且水平滚动条永远不会出现。

是否可以有一个跨度（或其他标签）的集合，后跟一个换行符来指定行结束的时间以及水平滚动应该从哪里开始和结束？

<div style="overflow: auto">
    <span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span>
    <span>f</span> <span>g</span> <span>h</span> <span>i</span> <span>j</span>
    <span>k</span> <span>l</span> <span>m</span> <span>n</span> <span>o</span>
    <span>p</span> <span>q</span> <span>r</span> <span>s</span> <span>t</span>
    <span>u</span> <span>v</span> <span>w</span> <span>x</span> <span>y</span>
    <span>z</span>

    <br>

    <span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span>
    <span>f</span> <span>g</span> <span>h</span> <span>i</span> <span>j</span>
    <span>k</span> <span>l</span> <span>m</span> <span>n</span> <span>o</span>
    <span>p</span> <span>q</span> <span>r</span> <span>s</span> <span>t</span>
    <span>u</span> <span>v</span> <span>w</span> <span>x</span> <span>y</span>
    <span>z</span>

    <br>

    <span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span>
    <span>f</span> <span>g</span> <span>h</span> <span>i</span> <span>j</span>
    <span>k</span> <span>l</span> <span>m</span> <span>n</span> <span>o</span>
    <span>p</span> <span>q</span> <span>r</span> <span>s</span> <span>t</span>
    <span>u</span> <span>v</span> <span>w</span> <span>x</span> <span>y</span>
    <span>z</span>

    <br>

</div>

滚动条在哪里？

Answer 1

div 内的文本会在必要时换行以适应 div 的宽度。您可以阻止此设置white-space:nowrap;。见white-space。

这里有一个例子https://jsfiddle.net/nmagq349/