Перенос слов на следующую строку без прокрутки

Question

У меня есть этот забавный маленький терминал Angular project ... терминал работает должным образом, так как вертикальная прокрутка постоянно присутствует и автоматически прокручивается при вводе новых команд

Как проверить, что я могу получить текст внутри горизонтальных элементов для переноса на следующую строку? Я пробовал все различные комбинации слов-перерыв и overflow-x и т. Д. И т. Д.

Я хочу, чтобы текст в <div class = ui-terminal-content> переносился на следующую строку вместо создания полосы прокрутки ...

Для справки, вы можете посетить http://stucodes.com и набрать в команде перец ... слово societtyyyyyyyy должно переноситься, а не вызывать горизонтальную полосу прокрутки.

.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 devtools. Измените свой 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;
}

, а затем удалите white-space: pre из класса .responsediv[_ngcontent-c0] в другой таблице стилей.