如何在多行中修复显示消息

Question

.abc{
white-space:pre-wrap;
}

<label >student</Label>:<span class="abc">He is a good boy </br> he is also kind'</span>

假设我在2行中的Angular应用程序中显示消息像这样：LabelStudent：Ram是一个好孩子，他也很善良。

我想要第二行消息，即他也很友善，应该显示在第一条消息的下方而不是标签下面

Answer 1

这可以通过flexbox轻松实现。我在here上复制了一个演示。

HTML：

<div class="container">
  <label>student :</label> 
  <div class="information">
    <span>He is a good boy</span>
    <span> he is also kind'</span>
  </div>
</div>

CSS：

.container {
  display: flex; 
  flex-direction: row;
}

.information {
  display: flex; 
  flex-direction: column;
}