How can I text-align the very last line of my div when there is a gift?
I am trying to make it 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;
}
<br>
causes the second-to-last line to be justified, and the link that is the last line is also justified. The problem is, I don't want the second line to be justified. I only want the last line to be justified.
I tried to add the following to my CSS:
a {
text-align: justify;
}
and removing text-align-last: justify;
from #textbox, but I had no luck.
Any advice on how I can achieve this?
source to share
Since the tag a
is an inline tag, you must wrap the tag a
in a block tag, say a tag p
, and then apply justified CSS style.
If you only need to use a tag, here's 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 have to use html semantically, you can use block tags like p tag to wrap it.
About text-align-last, see text-align-last css-tricks
Hope this helps you.
source to share
You can assign this CSS to a tag a
:
#textbox > a {
display: block;
text-align-last: justify;
}
Whatever the content of your link (which you have not provided), to justify it, you first need to make it a block element. Then you can justify its content.
#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>
source to share