只在文本中加下划线的最后一行文字
我只想划下一些文本的最后一行下划线。当文本换行时,仍然只有最后一行必须加下划线。我发现这个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>
任何人有一个想法?
Thx!
试试下面的CSS
div > p:last-child:after {
position: absolute;
left: 0;
bottom: -15px;
width: 100%;
height: 1px;
border-bottom: 10px solid #000;
content: ""
}
这里更新JSfiddle
谢谢,但它不起作用。这条线延伸到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>
我不喜欢这样的解决方案因为它奎雷斯复制的内容,但也许有人有一个想法,以改善它。
编辑:添加我的结果的截图:
在Firefox中无法使用50.0
这也是全宽度。没有什么不同,只是有一个边界。 –
您使用的是@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;
}
}
}
我试着用一些代码,但没有成功打。你可以对底部宽度减小的边框感到满意吗?它与最后一行的宽度无关吗? –