css - 如何修复多行显示消息

Question

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

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

假设我在 Angular 应用程序中用 2 行显示消息，如下所示:LabelStudent:拉姆是个好 child ，他也很善良。

我想要第二行消息，即 He is also kind，应该显示在第一条消息的正下方，而不是标签下方

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;
}