全文爲下劃線

我想在多行文本塊下面創建一條直到該塊中最長文本行長度的行。我想實現這樣的事情：全文爲下劃線

`Lorem Ipsum, Lorem Ipsum, 
Lorem Ipsum 
=========================----------------`

例子我做了什麼至今 http://jsfiddle.net/VHdyf/82/

來源

2017-04-07 K. A. T.

您在父元素上聲明瞭300px寬度。如果你聲明'300px' –

，爲什麼不使用'text-decoration：underline'，它怎麼可能是「全寬」？ – Tijmen

@LaraBelle全角我的意思是全文:) –

如果你是打開使用jQuery你可以...

獲取的span
寬度追加該寬度的hr
樣式的hr根據需要

fiddle

$(function() { 
 

 
    $('span').each(function() { 
 
    var w = $(this).width(); 
 
    var l = $('<hr />'); 
 

 
    l.css("width", w); 
 
    $(this).append(l); 
 
    }); 
 
});

span { 
 
    position: relative; 
 
    display: inline; 
 
    padding-bottom: 2px; 
 
} 
 

 
hr { 
 
    width: 50px; 
 
    margin-left: 0; 
 
    border: 2px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <span>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, </span> 
 
</div> 
 

 
<br/> 
 
<br/> 
 
<div> 
 
    <span>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, LoremIpsumLoremIpsumLoremIpsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, </span> 
 
</div> 
 

 
<br/> 
 
<br/> 
 
<div style="display:block;width:300px;"> 
 
    <span>Lorem Ipsum, Lorem Ipsum, LoremhkjhkasdasdffasfasfasfjhjkIpsum, </span> 
 
</div>

來源

2017-04-07 09:17:58 sol

我是開放的JS和jQuery解決方案，但我更喜歡嘗試在純CSS中做一些事情，然後，當不可能的時候，使用JS解決方案，所以我非常感謝解決方案 –

@KAT，但它解決了您的問題嗎？ – Sugar

我這麼認爲，謝謝 –

這實現你的目標是說：

p { 
 
display: inline-block; 
 
border-bottom: 2px solid #000; 
 
}

<p>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum<br/>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum Lorem Ipsum, Lorem Ipsum, Lorem Ipsum<br/>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum</p>

來源

2017-04-07 09:01:23 mayersdesign

不幸的是，如果文本中沒有明確的中斷（
），這將不起作用 - 該行將擴展到父容器的全部寬度。 – Mayjak

謝謝，好主意，但只有在你有
標記的情況下才能使用，如果你刪除它不起作用。小提琴的那個：http://jsfiddle.net/VHdyf/83/ –

我認爲有換行符，否則爲什麼你不會簡單地強調p標籤？我不確定是否有人理解你的問題:( – mayersdesign

全文爲下劃線

回答

相關問題