Text dynamisch je nach Bildschirmgröße umbrechen?

Question

Ich habe ein modales Formular, das ich den Text abhängig von der Größe des modalen Formulars umbrechen soll. Was ist das richtige CSS dafür?

Momentan benutze ich das eckige mit neuen Linien und ich schreibe die Zeilenumbrüche hart. Das Problem ist, dass der Zeilenumbruch bleibt, wenn der Bildschirm größer ist und der Text dadurch peinlich und nicht zentriert aussieht.

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

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

}

Meine html `

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

Answer 1

Sie müssen die Medien Abfrage verwenden wie unten-

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