将单词换行到下一行而不滚动

Question

我有一个有趣的小终端 Angular 项目......终端工作正常，因为垂直滚动一直存在，并在输入新命令时自动滚动

我怎样才能让水平div 中的文本换行到下一行？我已经尝试了所有不同的断字和溢出x等组合

我希望<div class = ui-terminal-content>中的文本换行到下一行，而不是创建滚动条......

作为参考，您可以访问 http://stucodes.com 并输入命令 pepper...单词 societtyyyy 应该换行，而不是导致水平滚动条。

.ui-terminal {
/* margin-top: 5px; */
height: 22em;
border: 1px;
overflow-y: scroll;
border-style: solid;
max-width: 40em;
background-color: black;
}
.headercontent {
padding-top: 5px;
padding-left: 0px;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
.terminalheader {
max-width: 40em;
height: 30px;
border: 1px;
border-bottom: 0px;
border-style: solid;
border-color: black;
}
.ui-terminal-input {
border: 0 none;
background-color: transparent;
color: inherit;
padding: 0;
width: 75%;
outline: none;
vertical-align: baseline;
color: transparent;
text-shadow: 0 0 0 white;
font-family: monospace;
font-size: 15px;
}

<div class="ui-terminal " (click)="focus(in)">
<div class="word-break">
<div class="ui-terminal-content">
<div *ngFor="let command of commands">
<span class="commandspan ui-terminal-command">{{command.text}}</span>
<div class="responsediv">{{command.response}}</div>
</div>
</div>
</div>
<div>
<span class="inputspan ui-terminal-content-prompt">{{prompt}}
<!-- C:/stucodes -->
{{commandPreface}}
<input elastic-input #in type="text" [(ngModel)]="command" class="ui-terminal-input" autocomplete="off" (keydown)="handleCommand($event)" autofocus>
</span>
</div>
</div>

Answer 1

我去了你的网站，在Chrome开发工具中玩了一下。 将您的 CSS 更改为以下内容：

.ui-terminal {
/* margin-top: 5px; */
height: 22em;
border: 1px;
overflow-y: scroll;
border-style: solid;
max-width: 40em;
background-color: black;
white-space: pre-wrap;
}

，然后从其他样式表中的.responsediv[_ngcontent-c0]类中删除white-space: pre。