javascript - CSS 用省略号填充表 TD 内的空白

Question

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

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

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

第一个和最后一个 child td 分别左对齐和右对齐。中心的任何 td 都是中心对齐的。这个想法是让省略号填充右边的空白，左对齐。左边空白，右对齐，两边居中。

我的第一个想法是使用 css :before 和 :after 并用'......................'过度填充内容然后用文本中断 -溢出:类似省略号。

.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>