CSS用省略號填充表TD中的空格

我在每個td中都有一個帶有文本的引導表。我不知道這是否可能，但我想用省略號填充空格。CSS用省略號填充表TD中的空格

我不希望邊框底部的原因是我不希望文字下劃線。

這是我的桌子和我到目前爲止嘗試過的東西。

第一和最後一個孩子TD對齊左和右。中心的任何td都居中對齊。這個想法是讓省略號填充左側對齊的空白。左側空白區域右側對齊，兩側空白區域爲中心。

我的第一個想法是使用css：之前和之後：用'.......................'填充內容然後用文本打破-overflow：省略號。

.table-menu .table-responsive td:first-child:after, .table-menu .table-responsive td:last-child:before { 
    text-overflow:ellipsis; 
    content: '.......................'; 
}

但由於表格是響應式的，所以這不起作用。這些表格需要固定的寬度才能使結果生效。因此，過度填充內容只是將其推向了新的一頁。

是否有一種方法在CSS或JS來實現這一點，或者我需要另一種方法來填充空白？

這裏是我上面的代碼的jsfiddle https://jsfiddle.net/h3n18huh/1/

來源

2016-09-23 ServerSideSkittles

我有一個想法，對於這一點，你可以添加所有<td>內的標籤或跨度，跨度/標籤有白色背景和<td>有一個點的背景圖片重複。所以跨度和標籤將覆蓋白色背景的點，省略號將用於任何分辨率和圖形化。

例子：

td:nth-child(1) { text-align: left; } 
 
td:nth-child(2) { text-align: center; } 
 
td:nth-child(3) { text-align: right; } 
 

 
span { 
 
    background-color: white; 
 
    display: inline-block; 
 
    padding: 2px 5px; 
 
} 
 
td { 
 
    background: url(http://s9.postimg.org/5hyiu7din/dot.png) left bottom repeat-x; 
 
}

<table width="100%"> 
 
    <tr> 
 
    <td><span>Left</span></td> 
 
    <td><span>Center</span></td> 
 
    <td><span>Right</span></td> 
 
    </tr> 
 
</table>

來源

2016-09-23 13:02:02

這是一個奇妙的方法，許多感謝您的回答。 – ServerSideSkittles

歡迎您:) –

CSS用省略號填充表TD中的空格

回答

相關問題