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

Question

我在bootstrap中有一个表，每个td中都有文本。我不知道这是否可行，但我想用省略号填充空白。

我不想要边框底部的原因是我不希望文本加下划线。

这是我的表格以及到目前为止我尝试过的内容。

第一个和最后一个孩子td分别左右对齐。中心的任何td都是中心对齐的。我们的想法是让省略号在左边对齐填充空白。左侧的空白对齐，两侧为中心。

我的第一个想法是使用css：before和：after＆over 39f .......................＆＃39 ;然后打破文本溢出：省略号。

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

但由于表格是响应式的，因此无效。表格需要固定宽度才能使结果起作用。所以过度填充内容只是把它推到一个新的界限。

在css或js中是否有办法实现这一目标，还是需要另一种方法来填充空白？

以上代码https://jsfiddle.net/h3n18huh/1/

的jsfiddle

Answer 1

我对此有所了解，您可以在所有<td>内添加标签或跨度，该跨度/标签具有白色背景，<td>具有重复点的背景图像。因此，跨度和标签将覆盖带有白色背景的点，省略号将适用于任何分辨率和alineation。

示例：

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>