只在文本中加下劃線的最後一行文字

我只想劃下一些文本的最後一行下劃線。當文本換行時，仍然只有最後一行必須加下劃線。我發現這個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

只在文本中加下劃線的最後一行文字

回答

相關問題