在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/