How To Left Align The 2nd Line Of A Text If Initial Text-align Is Center

I am needing to center align text IF there is only ONE line in the text, but left align the 2nd line if it there is one I've looked online and could not find a solution. You would

Solution 1:

Instead of doing this (or something similar):

.wrapper {
  text-align: center; 
  width: 100%
}

<divclass="wrapper"><p>Title</p><divclass="text">
    Example-TextExample-TextExample-TextExample-Text<br> Example-Text
  </div></div>

Just wrap a container around it and center it:

.wrapper {
  width: 100%; 
  text-align: center;
}

.text {
  display: flex; 
  justify-content: center; 
  text-align: left;
}

<divclass="wrapper"><p>Title</p><divclass="text"><p>Example-TextExample-TextExample-TextExample-Text<br>Example-Text</p></div></div>

Solution 2:

You can do this using display:table

.wrapper {
  max-width: 400px;
  margin: auto;
  border: 2px solid;
}

.wrapperh1 {
  text-align: center;
  margin:5px;
}

.wrapper>div {
  display: table;
  margin: auto; /* center the block of text keep the default text-align:left inside*/
}

<divclass="wrapper"><h1>Title</h1><div>Lorem ipsum dolor sit amet</div></div><divclass="wrapper"><h1>Title</h1><div>Lorem ipsum dolor sit amet, consectetur adipiscing</div></div><divclass="wrapper"><h1>Title</h1><div>Lorem ipsum dolor sit amet, consectetur<br> adipiscing</div></div><divclass="wrapper"><h1>Title</h1><div>Lorem ipsum dolor sit amet, consectetur adipiscing. Mauris luctus laoreet nibh,</div></div>

Or inline-block

.wrapper {
  max-width: 400px;
  margin: auto;
  border: 2px solid;
  text-align: center; /*center the text container*/
}

.wrapperh1 {
  margin:5px;
}

.wrapper>div {
  display: inline-block;
  text-align:left; /*keep the text left aligned inside*/
}

<divclass="wrapper"><h1>Title</h1><div>Lorem ipsum dolor sit amet</div></div><divclass="wrapper"><h1>Title</h1><div>Lorem ipsum dolor sit amet, consectetur adipiscing</div></div><divclass="wrapper"><h1>Title</h1><div>Lorem ipsum dolor sit amet, consectetur<br> adipiscing</div></div><divclass="wrapper"><h1>Title</h1><div>Lorem ipsum dolor sit amet, consectetur adipiscing. Mauris luctus laoreet nibh,</div></div>

Solution 3:

First of all, I would like to say this can't be achieved without CSS and you need to use styling to your Code. Next, there are multiple ways of doing the desired effect. I would go on to explain each one of those.

1. text-align-last property:

Quoting directly from W3Schools:

The text-align-last property specifies how to align the last line of a text.

Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child.

Note: In Edge/Internet Explorer the text-align-last property only works on text that has "text-align: justify".

Browser Support:

Code Snippet:

div.a {
  text-align: center;
  -moz-text-align-last: right; /* For Firefox prior 58.0 */text-align-last: left;
}

<divclass="a"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p></div>

2. Using span:

By default, span is an inline element but you can set display: block to it and then you can text align things differently. Notice the use of !important here.

Code Snippet:

p {
  text-align: center;
}
span {
  text-align: left !important;
  display: block;
}

<p>
  This is the first line
  <span>Second Line</span></p>

3. Using wrappers:

I don't want to repeat answers already provided. Aaron3219 has already used wrappers to answer this question. This answer can be found here.