如何排列網頁上的可變長度下劃線？

我正在使用TCPDF來顯示一些表數據。爲此，我使用HTML + CSS，然後將其轉換爲PDF格式。我想在我的桌子上劃線，人們可以在這裏寫入筆記。我目前使用下劃線字符_來繪製這些線條。我似乎遇到的問題是它們在右側鋸齒（請參閱下面的誇張圖像）。 enter image description here 如何排列網頁上的可變長度下劃線？

我正在尋找一種不讓線條鋸齒的方法。實際上，我可以讓它們變得更加鋸齒，但由於非固定寬度的字體，即使添加/刪除下劃線字符以排列它們，它們仍然顯得有點鋸齒。

我正在尋找任何合理的解決方案，其中下劃線排到表/ div /容器的右邊界。這可以以任何方式完成（使用字符或CSS，甚至圖像），只要事情正確排列即可。在我的情況下，容器是<td>words words _____</td>

事情是這樣的： enter image description here

注意/更新：

不幸的是，試圖回答下面我發現TCPDF並不是很穩定或寬容之後，它CSS標記比基本更多一點。下面的解決方案在瀏覽器上工作時，似乎無法在HTML + CSS和{PDF到TCPDF}轉換器中生存。至於免費版，至於TCPDF開發的狀態，我不確定是否可以有解決方案。現在我可能不得不堅持不平衡的下劃線字符。

來源

2014-06-30 Dennis

該問題缺乏明確的問題陳述。你真的想要使用下劃線字符序列，或者你正在尋找一個好的表格渲染？在後一種情況下，您應該考慮在單元格之間使用邊框，而不是使用下劃線字符技巧。顯示一些實際的HTML和CSS代碼將會有所幫助，特別是如果附帶說明結果與所需內容的不同之處。 –

下面是一個使用bottom-border實現下劃線的解決方案。

.container { 
    width: 400px; 
    background-color: purple; 
    color: white; 
    padding: 1rem; 
} 

p { 
    border-bottom: solid white 1px; 
} 

span { 
    border-bottom: solid purple 3px; 
    padding-right: 1rem; 
}

和

<div class="container"> 
    <p><span>Question thingy</span></p> 
    <p><span>Question thingy asdf </span></p> 
    <p><span>Question thingy asdf asdf asdf </span></p> 
</div>

它產生這樣的輸出：

Screenshot

來源

2014-06-30 22:45:42 recursive

我喜歡這種方式，純粹和簡單。不幸的是，我放入的CSS/HTML是通過一些專有軟件（它被轉換爲PDF）運行的，螞蟻軟件不能正確渲染border-bottom。現在我可能不得不堅持強調。但我學到了很酷的東西！ – Dennis

在沒有看到您現有的標記的情況下給您提供很好的建議非常困難，但希望這會指向您正確的方向：JSFiddle。基本上，我們有一條完整的寬度線來僞造下劃線，然後我們的文本具有白色背景以覆蓋下面的線條。

示例HTML：

<p><span>Text</span></p> 
<p><span>Longer text</span></p> 
<p><span>Even longer text</span></p>

CSS：

p { 
    position: relative; 
} 

p:after { 
    background: #000; 
    content: ""; 
    display: block; 
    height: 1px; 
    position: absolute; bottom: 1px; 
    width: 100%; 
} 

span { 
    background: #fff; 
    padding-right: 5px; 
    position: relative; 
    z-index: 1; 
}

來源

2014-06-30 21:33:37

一個念頭出現在我...

可能的窠臼，使得線路I一致可以改變我的設計。即使用類似於Excel工作表的表格。

_________________ 
|_words__|________| <-- empty cells instead 
|_words2_|________|  of underlines

TCPDF似乎與這些交易沒關係。

來源

2014-07-01 20:39:54 Dennis

如何排列網頁上的可變長度下劃線？

回答

相關問題