如何修复多行显示消息

Question

.then

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

说我在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;
}