CODEWITHSUNDEEP
htmlcss
emersonthis
emersonthis

Reputation: 33378

Advanced CSS challenge: underline only the final line of text with CSS

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.

Upvotes: 19

Views: 9536

Answers (6)

Bilal Ali
Bilal Ali

Reputation: 41

If this is the text "A line of text that is long enough so that it wraps to another line." and you want to underline "it wraps to another line." all you need is to use the selector.

For Html:

<div>
     A line of text that is long enough so that 
     <last>it wraps to another line.<last>
<div>

For CSS:

div last{
    text-decoration: underline;
}

Upvotes: -1

Vik
Vik

Reputation: 71

.title {
  width: 700px;
  overflow: hidden;
}

.title:after {
  content: '';
  display: inline-block;
  vertical-align: bottom;
  height: 1px;
  box-shadow: -100vw 100vw 0 100vw;
}
<h1 class="title">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</h1>

Upvotes: 7

kwah
kwah

Reputation: 1149

Disclaimer: Chances are that this is not possible, but please consider this answer to be thinking out loud / suggestion of a place to start looking, than than working code.

Is there possibility of highlighting the lines of text (with a colour that matches the background colour) and then adjusting the line-height such that the background of the lower lines overlap the underline?

Pictures say a thousand words, so take a look at these:

Before:
enter image description here

After:
enter image description here

From these mock-ups you can see that there are a couple of caveats and do not match exactly what is being asked for, but perhaps this is a starting point..?

Upvotes: 2

emersonthis
emersonthis

Reputation: 33378

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.

Upvotes: 21

albert
albert

Reputation: 8153

you can use css generated content to achieve the effect. i set up an example on jsfiddle, but essentially you add the border to p:after{}; in this example, the border stretches all the way across, which seems undesirable, however thats just because the parent container is vanilla for demos. i think it should be adaptable for your situation. here ya go: http://jsfiddle.net/jalbertbowdenii/bJ9D4/

Upvotes: 5

IluTov
IluTov

Reputation: 6862

According to this:

Selecting the last line of a <p> element

it won't be possible unless you use some JavaScript..

Upvotes: -1

Related Questions