如何在CSS中強調空格？

我正在製作一份應該可以從網絡瀏覽器打印的報告。底部是接收者填寫的字段，因此加下劃線。我寧願不必注意一定數量的下劃線，而且他們似乎在它們之間有差距。如何在CSS中強調空格？

什麼我打算是...

已付金額：$ _ __ _ __ _ __ _ __ _ __ _ ___

到目前爲止，我已經管理這個CSS：

<div> 
    <p style="border-bottom: 1px solid black;"> 
     Amount Paid: $ 
    </p> 
</div>

這會繪製一條線到父div的邊緣 - 我想要的。但是，它也在「金額支付：$」下畫了一條線，這是我不想要的。我認爲失敗的p S，span S等每一個組合：

如果我把文本的span是核武器邊框，沒關係，我想，因爲它仍然是部分p和邊框仍然繪製。

我可以在文本後面添加下劃線，但不起作用。它似乎只想在邊框樣式在p元素中時加下劃線的空格。

同樣，如果我更換p與span它沒有得到備忘錄，它應該擴展邊界一路：

<p> 
    <span>Amount Paid: $ </span> 
    <span style="border-bottom: 1px solid black;"> </span> 
</p>

不執行任何操作。該線從未繪製。如果我給第二個範圍添加一個字母，它就是在這個下面繪製的，但是沒有更多。如果我把p換成任何其他類似div或span的東西，它似乎也不能工作...

任何想法？提前致謝。

來源

2010-12-22 Andrew

你可能已經在的情況下，一個偶然發現它的語義有效的，*不贊成**，鼓勵**，使用表格。你使用表格數據嗎？（即總計的一系列交易）。 – zzzzBov 2010-12-22 20:46:03

我想你是對的，它是表格數據......但只有三行。原始報告中的下劃線延伸到了列將結束的地方，所以我放棄了它，而不是處理羣集等等，但我也可以嘗試一下。 – Andrew 2010-12-22 21:20:15

將第二個跨度的display（CSS）更改爲inline-block並設置其width（CSS）。

UPD：

或者你可以試試：

<p style="width: 200px; display: table;"> 
    <span style="display: table-cell; width: 100px;">Amount Paid: $ </span> 
    <span style="display: table-cell; border-bottom: 1px solid black;"></span> 
</p>

來源

2010-12-22 20:28:17

工作很好，但我必須設置寬度。希望能將它擴展到剩下的尺寸標籤，但我可以完成這項工作。 – Andrew 2010-12-22 20:33:15

@Andrew：在這種情況下，您可以嘗試將父`div`和`span`的`display`分別更改爲`table`和`table-cell`。實際上，最近我有類似的問題，並且使用`display`s進行遊戲很成功。 – 2010-12-22 20:36:12

如果你不介意手動指定線的寬度，你可以這樣做：

<span style="border-bottom: 1px solid black; padding-left: 50px">&nbsp;</span>

來源

2010-12-22 20:29:53 thirtydot

如果您不用擔心對舊版瀏覽器（IE6代）的支持，總是使用min-width屬性來獲取默認數量的空白區域，並根據需要進行擴展。

<p> 
    <span>Amount Paid: $ </span> 
    <span style="border-bottom: 1px solid black; min-width: 100px;"> </span> 
</p>

注意，對於IE7，你必須一個overflow: visible添加到最小寬度元素，使其正確對待最小寬度，而不是它的默認把它當作寬度（車）的行爲。

來源

2010-12-22 20:54:06 TheQ

此工程於2014年

Amount Paid: $ <span style="text-decoration: underline; white-space: pre;">     </span>

來源

2014-07-25 16:42:42 Theophilus

另一種解決方案使用disply: flex;和flex-grow年份：

.container { 
 
    width: 200px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.underline { 
 
    flex-grow: 1; 
 
    border-bottom: 1px solid black; 
 
    margin-left: 5px; 
 
}

<div class='container'> 
 
    <div class='row'> 
 
     <div class='label'>Count:</div> 
 
     <div class='underline'></div> 
 
    </div> 
 
    <div class='row'> 
 
     <div class='label'>Amount Paid:</div> 
 
     <div class='underline'></div> 
 
    </div> 
 
</div>

來源

2018-02-26 16:20:45

如何在CSS中強調空格？

回答

相關問題