html - 根据屏幕大小动态换行文本？

Question

我有一个模态窗体，我希望文本根据模态窗体的大小换行。什么是合适的 css？

目前我正在使用带有新行的 Angular ，并且我正在对换行符进行硬编码。问题是，如果屏幕变大，换行符会保留下来，这会使文本看起来很尴尬，而且没有居中。

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