Question

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

如何在水平div中获取文本以包装到下一行？我已经尝试过所有不同的断字和溢出-x等组合

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

作为参考，您可以访问http://stucodes.com并键入命令Pepper ...单词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]。

将文字环绕到下一行而不滚动

1 个答案: