CODEWITHSUNDEEP
htmlcss
redongreen
redongreen

Reputation: 107

How can I text-align the very last line of my div when there is a <br> present?

I am trying to make so that only the very last line of text is set to text-align: justify;

My html looks like this:

<body>
<div class="container">
    <div id="textbox">Some Text goes here<br><a href=link></a>
    </div>
</div>
</body>

My CSS:

#textbox {
    text-align: center;
    text-align-last: justify;
}

The <br> is causing the second-to-last line to be justified, and the link which is the last line is also justified. The problem is that I do not want the second-to-last line to be justified. I only want the very last line be justified.

I have tried to add the following to my CSS:

a {
   text-align: justify;
}

and removing text-align-last: justify; from #textbox but I did not have any luck.

Any recommendations on how I can go about achieving this?

Upvotes: 3

Views: 609

Answers (2)

Johannes
Johannes

Reputation: 67799

You can assign this CSS to the the a tag:

#textbox > a {
  display: block;
  text-align-last: justify;
}

Whatever the contents of your link will be (which you didn't specify), in order to justify it, you first need to make it a block element. Then you can justify its contents.

#textbox > a {
  display: block;
  text-align-last: justify;
}
<body>
  <div class="container">
    <div id="textbox">Some Text goes here<br><a href=link>What is supposed to be here?</a>
    </div>
  </div>
</body>

Upvotes: 0

YinchaoOnline
YinchaoOnline

Reputation: 198

Because a tag is an inline tag,so you should wrap a tag into a block tag,say p tag,and then apply justify css style.

If you have to use a tag alone,following is an example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #textbox {
      -ms-text-align-last: center;
      -moz-text-align-last: center;
      text-align-last: center;
    }
    
    a {
      display: block;
      -ms-text-align-last: justify;
      -moz-text-align-last: justify;
      text-align-last: justify;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="textbox">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sed magni nesciunt pariatur recusandae quam. Suscipit dolorum, labore exercitationem natus!
      <br>
      <a href="#">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis nulla autem perferendis enim deleniti magnam incidunt, maxime praesentium amet officiis.
            </a>
    </div>
  </div>
</body>

</html>

PS:Instead of using br tag,you should use html semantically,you can use such block tags as p tag to wrap line.

About text-align-last,see css-tricks text-align-last

Hope it can help you.

Upvotes: 1

Related Questions