滚动条不起作用，线分为两部分

Question

我正在下面创建代码 css。我想水平滚动，但是当句子太长时，它不会创建滚动，而是断句并显示在下一行。在图像中，我想要 aaaa.. 应该只打印一行，bbb.. 在第二行 line.but aaa... 句子出现在没有标签的第二行。

html代码&CSS代码

此 div 标签容器宽度为屏幕的 80%。

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>

Answer 1

尝试使用分词

word-break: normal;

Answer 2

经过多次尝试我得到了正确的答案..

白色-space:nowrap;

这个属性去掉white-space在新行添加一句

滚动条不起作用，线分为两部分

Scrollbar not working and line divide in two part

html

css

scrollbar