Line breaks and horizontal scrolling in html/css
<p>I have a div with many small spans in it. I'd like to have a horizontal scroll bar where the line extends until the line break tags (a-z on each line with a horizontal scroll bar to view the entire line on a narrow screen). </p>

<p>I have added the overflow style to the div and set it to 'auto' but the content is always squeezed into the div and the horizontal scroll bars never show up. </p>

<p>Is it possible to have a collection of spans (or some other tag) followed by a line break to specify when the line ends and where the horizontal scrolling should begin and end?</p>

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

    &lt;br&gt;

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

    &lt;br&gt;

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

    &lt;br&gt;

&lt;/div&gt;
</code></pre>

<p>Where is the scroll bar?<a href="https://i.stack.imgur.com/e49oq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e49oq.png" alt="enter image description here"></a></p>