只在文本中加下划线的最后一行文字

我只想划下一些文本的最后一行下划线。当文本换行时，仍然只有最后一行必须加下划线。我发现这个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

任何人有一个想法？

Thx！

来源

2016-11-23 user6079228

我试着用一些代码，但没有成功打。你可以对底部宽度减小的边框感到满意吗？它与最后一行的宽度无关吗？ –

试试下面的CSS

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

这里更新JSfiddle

来源

2016-11-23 09:01:44

谢谢，但它不起作用。这条线延伸到div的最左侧，即使底线比上面的线短。 – user6079228

检查上面JSfiddle的答案，其工作在那里 –

感谢您的快速回复，但不工作。该行比文本的最后一个单词长。它必须只是在最后的话 – user6079228

我想这就是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

来源

2016-11-23 09:55:06

这也是全宽度。没有什么不同，只是有一个边界。 –

您使用的是@RReveley的浏览器？我没有看到它全长... –

我在Firefox。我运行了代码片段 –

我回答了类似的问题。
它不能在纯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; 
    } 
} 

}

来源

2017-08-07 03:53:31

只在文本中加下划线的最后一行文字

回答

相关问题