1

我目前正在处理一个包含 html 表格的页面，并使用引导网格管理列宽度。这是一个重现我正在苦苦挣扎的情况的小例子：

https://jsfiddle.net/ggu5Lpc0/45/

我的工作基于引导嵌套列示例。

<tr class="row">
        <td class="col-xs-4 title">Rambo</td>
        <td class="col-xs-1 synopsis">
          <div class="row">
            <div class="col-xs-10 synopsis-text">
              A movie with Stalone shooting everywhere and wearing a bandana !
            </div>
            <div class="col-xs-2">
              <a class="synopsis-link">
                read
              </a>
            </div>
          </div>
        </td>
        <td class="col-xs-7 note">12 / 10</td>
</tr>

它一直有效，直到我决定更改第二列中文本的显示：将每个文本单元格仅放在一行中并隐藏其溢出（带有省略号）。

.synopsis-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

然后似乎引导程序在每个表格单元格上应用的宽度属性已经停止工作，因为我使用了 css 属性“空白：nowrap;”。

如何保持列宽设置，并将这些文本用省略号缩短并仅在一行中（也保持同一行的每个链接）？

为什么它目前不起作用？我想明白！

4

0 回答 0