CODEWITHSUNDEEP
htmlcss
Dims
Dims

Reputation: 51249

Is it possible to position relatively to the last line of a paragraph?

While paragraph is aligned text-align:justify then the last line can have different length, depending on content.

Can I position something relatively to this position?

enter image description here

Upvotes: 3

Views: 178

Answers (1)

ralph.m
ralph.m

Reputation: 14365

Edit: As Jukka points out, the first attempt didn't work in Firefox, so here's an edited example that seems to work better: http://codepen.io/pageaffairs/pen/Glkng

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

p {width: 50%; padding-bottom: 2em; line-height: 1.3em;}
i {position: relative;}
b {position: absolute; right: 0; bottom: -1.4em; white-space: nowrap;}

</style>
</head>
<body>

<p><span>Vegetation is the basic instrument the creator uses to set all of nature in motion.<i><b>Antoine Lavoisier</b></i></span></p>

</body>
</html>

First attempt (faulty in Firefox, as Jukka points out):

Maybe something like this? http://codepen.io/pageaffairs/pen/qKfsD

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

p {width: 340px; padding-bottom: 2em; line-height: 1.3em;}
span {position: relative;}
b {position: absolute; bottom: -1.4em; right: 0; display: inline-block; white-space: nowrap;}

</style>
</head>
<body>

<p><span>Vegetation is the basic instrument the creator uses to set all of nature in motion. <b>Antoine Lavoisier</b></span></p>

</body>
</html>

Upvotes: 2

Related Questions