I am writing some CSS code below. I am trying to achieve horizontal scrolling, but if the sentence is too long, it breaks and displays on the next line. In the image, I want "aaaa.." to be displayed on only one line and "bbb.." on the second line, but the "aaa..." sentence is coming on the second line without a line break tag.
Here is the HTML & CSS code:
The width of this div container is set to 80% of the screen.https://i.sstatic.net/ITBNq.png
code {
margin: 10px 0;
padding: 10px;
text-align: left;
display: inline-block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 4px solid #6d7fcc;
color:#000;
}<code> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</code>