居中时仅加下划线的最后一行文字 [英] Underline only final line of text when centered

问题描述

我只想强调一些文字的最后一行。当文本换行时，仍然只有最后一行必须加下划线。

我发现这个

在Firefox 50.0中不起作用

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!

解决方案

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:

Is doesn't work in Firefox 50.0

这篇关于居中时仅加下划线的最后一行文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！