CODEWITHSUNDEEP
htmlcssangularjs
CodeMan03
CodeMan03

Reputation: 226

Wrap text dynamically depending on screen size?

I have a modal form that I want the text to wrap depending on the size of the modal form. What is the proper css for that?

Currently I am using the angular with new lines and I am hardcoding the line breaks. The problem is the line break stays if the screen is larger and it makes the text look awkward and not centered.

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

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

}

My html `

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

Upvotes: 0

Views: 2102

Answers (1)

ManishSingh
ManishSingh

Reputation: 1944

You need to use the media query like below-

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

Upvotes: 1

Related Questions