CODEWITHSUNDEEP
htmlcss
tvb108108
tvb108108

Reputation: 408

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 set the normal to:

text-align: center

and I want the initial text to be centered, but then if it wraps to a 2nd line I want the text to start at the left instead of the center.

Picture of the end result: enter image description here

but then if it is just one line, I want it to be centered like the below

enter image description here

Upvotes: 0

Views: 3464

Answers (3)

Conrad Reeves
Conrad Reeves

Reputation: 78

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:

enter image description here

Code Snippet:

div.a {
  text-align: center;
  -moz-text-align-last: right; /* For Firefox prior 58.0 */
  text-align-last: left;
}
<div class="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.

Upvotes: 0

Aaron3219
Aaron3219

Reputation: 2225

Instead of doing this (or something similar):

.wrapper {
  text-align: center; 
  width: 100%
}
<div class="wrapper">
  <p>Title</p>
  <div class="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;
}
<div class="wrapper">
  <p>Title</p>
  <div class="text">
    <p>Example-TextExample-TextExample-TextExample-Text<br>Example-Text</p>
  </div>
</div>

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 272955

You can do this using display:table

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

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

.wrapper>div {
  display: table;
  margin: auto; /* center the block of text keep the default text-align:left inside*/
}
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet</div>
</div>

<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing</div>
</div>
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur<br> adipiscing</div>
</div>
<div class="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*/
}

.wrapper h1 {
  margin:5px;
}

.wrapper>div {
  display: inline-block;
  text-align:left; /*keep the text left aligned inside*/
}
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet</div>
</div>

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

Upvotes: 2

Related Questions