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

Question

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

我已将溢出样式添加到div并将其设置为“auto”，但内容总是被挤入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/