I have a unique Angular project with a terminal interface that functions properly, maintaining a vertical scroll and automatically scrolling when new commands are entered.
However, I am struggling to get the text within the horizontal divs to wrap to the next line. Despite trying various combinations of word-break and overflow-x properties, I have not been successful.
I want the text inside the
<div class=ui-terminal-content>For an example, you can visit and type in the command "pepper." The word "societtyyyyyyyy" should wrap correctly without creating a horizontal scrollbar.
.ui-terminal {
height: 22em;
border: 1px solid black;
overflow-y: scroll;
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 solid black;
border-bottom: 0px;
}
.ui-terminal-input {
border: 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}}
{{commandPreface}}
<input elastic-input #in type="text" [(ngModel)]="command" class="ui-terminal-input" autocomplete="off" (keydown)="handleCommand($event)" autofocus>
</span>
</div>
</div>