I want to underline the final line of multi-line text, or at least create the allusion of it. Look closely at the following examples, because I'm trying to do something tricky.
A. Here's what I want to happen (the __
marks the where the text should be underlined):
A line of text that is long enough so that it wraps
to another line.
________________
B. Here's what I DON'T want:
A line of text that is long enough so that it wraps
___________________________________________________
to another line.
________________
C. Or this:
A line of text that is long enough so that it wraps
to another line.
___________________________________________________
This effect is for a CMS so I won't know the precise length of text. This means that manually inserting <span>
s or <u>
tags are not an option. I also don't want to user javascript. I'm well aware that the effect I want is not the default behavior and that this will require some tricky CSS/HTML magic. But I feel like it might be possible. If you can't think of a way to do it, please don't bother to submitting an answer. Everything is impossible until you figure out how to do it.
There is no CSS for applying an underline ( text-decoration: underline; ) only to individual words in a multiple-word element. The best way would be to wrap each word in a span (not the spaces, just the words) in spans and apply underline to those spans.
The text-align-last property in CSS is used to set the last line of the paragraph just before the line break. The line break may be due to the natural ending of a paragraph, or it may be due to the use of <br> tag.
The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.
Steps: Create background image with linear-gradient() . Adjust its size with css background-size property. Place it at the bottom left position of the element with background-position css property.
Here's a variation on what @albert was doing. It uses the p:after{}
trick but with different display
. The <p>
seems to have to be position:relative;
to work.
<style>
p{position:relative; display:inline}
p:after{position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px solid #000; content:""}
</style>
<p>first line of test text which is long enough to stretch onto a second line .</p>
http://jsfiddle.net/VHdyf/
One cool thing about this approach is that it still uses border-bottom
, which I prefer to using underline
in most cases.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With