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

Question

我在每个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/

Answer 1

我有一个想法，对于这一点，你可以添加所有<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>