居中时仅在文本的最后一行下划线

Question

我只想在某些文本的最后一行加下划线。当文本换行到更多行时，仍然只有最后一行需要下划线。

我发现了这个Solutions。但是当文本居中时，这不起作用。因为当文本被换行时，该行一直延伸到最后一行的左侧。

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

有人有想法吗？

谢谢！

Answer 1

我猜这就是 OP 想要的：

.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>

我不喜欢这个解决方案，因为它需要复制内容，但也许有人有改进它的想法......

JSFiddle

---

编辑：添加我的结果截图：

在 Firefox 50.0 中不起作用

Answer 2

我回答了类似的问题。
它不能在纯 css 中完成。 我已经使用 javascript 创建了小提琴。
http://jsfiddle.net/VHdyf/89/

Javascript 部分

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;
  }
}

}

Answer 3

试试下面的 CSS

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

这里更新JSfiddle