CODEWITHSUNDEEP
htmlcsslayout
user6079228
user6079228

Reputation: 97

Underline only final line of text when centered

I want to underline only the last line of some text. When the text wraps to more rows, still only the last line has to be underlined.

I found this Solutions. But that does not work when the text is centered. Because the line stretches all the way to the left on the last row when the text gets wrapped. 

p{
  position: relative;
  display: inline
}
p:after {
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 100%;
  height: 1px;
  border-bottom: 10px solid #000;
  content: ""
}
<div style="text-align:center;">
  <p>Een lijn onder alleen de laatste regel, werkt ook op mobiel als de tekst over meerdere regels valt</p>
</div>

Jsfiddle

Anyone has an idea?

Thx!

Upvotes: 4

Views: 1822

Answers (3)

Abhay Srivastav
Abhay Srivastav

Reputation: 774

I answered similar question.
It can't be done in pure css. I have created the fiddle using javascript.
http://jsfiddle.net/VHdyf/89/

Javascript part

var parentEl = document.getElementsByClassName('customBtn');

for(var i=0;i<parentEl.length;i++){
var currentEl = parentEl[i];
var button = currentEl.childNodes[1];
var words = button.innerText.split(/[\s]+/); // An array of allthe words split by spaces, since that's where text breaks by default. var
var lastLine = []; // Putall words that don't change the height here.
var currentHeight = currentEl.clientHeight; // The starting height.
while(1){
  lastLine.push(words.pop());
  button.innerText = words.join(' ');
  if (currentEl.clientHeight < currentHeight) {
    var span = document.createElement('span');
    span.classList=['underline'];
    span.innerText = ' '+lastLine.reverse().join(' ');
    button.appendChild(span);
    break;
  }
  currentHeight = parentEl[i].clientHeight;
  if(!words.length){
    break;
  }
}

}

Upvotes: 1

Jordi Nebot
Jordi Nebot

Reputation: 3401

I guess that's what OP wants:

.underlined {
  position: relative;
}

.text {
  display: inline-block;
  text-align: center;
}

.line {
  color: transparent;
  display: inline;
  position: relative;
  left: 50%;
}

.line:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: 10px solid black;
  position: absolute;
  left: -50%;
  top: 0;
}
<p class="underlined">

  <span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sed ratione voluptatum ducimus unde velit debitis asperiores expedita, a deleniti repellat quis officia. Voluptate, earum rerum itaque, iste eligendi velit!</span>

  <span class="line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sed ratione voluptatum ducimus unde velit debitis asperiores expedita, a deleniti repellat quis officia. Voluptate, earum rerum itaque, iste eligendi velit!</span>

</p>

I don't like this solution because it requires to duplicate the content, but maybe someone has an idea to improve it...

JSFiddle

Edit: Adding a screenshot of my result:

Chrome Screenshot

Is doesn't work in Firefox 50.0

Upvotes: 3

Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Try the following CSS

div > p:last-child:after {
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 1px;
    border-bottom: 10px solid #000;
    content: ""
}

Here is updated JSfiddle

Upvotes: 0

Related Questions