I met a problem with text alignment. I want the text alignment responsively change. For example, I have a span element,

<span class='text'> lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </span>

When the browser shrinks to some kind of level, I want the text alignment changes from centre align to left align. How can I achieve it?

CodePudding user response：

@media only screen and (max-width: 600px) {
  .text {
     text-align: left;
     // ... do your stuff here
  }
}

This CSS will ONLY catch if the screen is smaller than 600px. Pretty sure this is what you are looking for.

source: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

CodePudding user response：

Add below css. I hope its useful to you

span.text{
text-align: center;
display: block;
}