根据屏幕大小动态包装文本？

Question

我有一个模态表单，我希望文本根据模态表单的大小进行换行。什么是适当的CSS？

目前我正在使用带有新线条的角度，我正在硬编码换行符。问题是如果屏幕较大并且文本看起来很笨拙并且没有居中，则换行就会停止。

.angular-with-newlines {
white-space: pre-wrap !important; 
   }

.text-center{
text-align: center !important;

}

我的html`

<div class="row text-center margin30">
      <h5 class=" angular-with-newlines">{{message}}</h5>    
</div>

Answer 1

您需要使用如下所示的媒体查询 -

@media (max-width:768px) {
.text-center{
text-align: center !important;
}
}