Блог

 .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: Рам — хороший мальчик,
он тоже добрый.

Я хочу, чтобы сообщение во второй строке, т. Е. Он тоже добрый, отображалось чуть ниже первого сообщения, а не под надписью

Этого можно легко достичь с помощью flexbox. Я воспроизвел демо здесь.

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