Html Bootstrap 3以响应的方式截断表行中的长文本

我使用的是bootstrap 3表格，当我在表格中放入大文本时，它会被包装成几行，但我希望它以响应的方式被截断，最后有三个点，而不会弄乱表格的布局（我找到了一些解决方案，但效果不好）

可能吗？怎么做

---

PS：欢迎使用任何解决方案，但如果可能的话，我希望只使用HTML/CSS。

您需要使用

表格布局：修复
，以便CSS省略号可以处理表格单元格

.table {
  table-layout:fixed;
}

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

演示：
这是我实现的，但必须设置宽度，不能是百分比


.trunc{
宽度：250px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
表tr td{
填充：5px
}
表tr td{
背景：鲑鱼
}
表tr td：第一个孩子{
背景：轻鲑鱼
}

怀孕期间的贵妇人。马塞纳斯·莱克图斯·图皮斯
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
我正在使用引导。

我使用了css参数。

.table {
  table-layout:fixed;
}

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

和引导网格系统参数，如下所示。

<th class="col-sm-2">Name</th>

<td class="col-sm-2">hoge</td>

名称
霍格
我是这样做的（您需要在
中添加一个类文本，并将文本放在
之间：

HTML

loooooong teeeext

SASS

.table td.text {
    max-width: 177px;
    span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
}

CSS等效

.table td.text {
    max-width: 177px;
}
.table td.text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

而且它仍然是移动响应的（忘记布局=固定），并将保持原来的行为

PS：当然177px是一种定制尺寸（放置您需要的任何东西）.
我已经试过了；问题是表格布局不好，所有列的宽度都相同，这是不公平的，我甚至在我的帖子中提到过！bootstrap使用一种非常好的方式根据每一列的内容为每一列分配宽度，我希望尽可能保持这种效果ixed布局不能解决这个问题。我必须切换到
display:block
，以删除添加到表行底部的一小段空白。请参阅，在不定义最大宽度的情况下，但占用其余可用空间的情况下，此解决方案是否可行？@JelmerBrands，如果您是指“自动”（宽度）中的cols，恐怕不行，否则浏览器就不会知道文本何时应该被截断。我不是CSS专家（我主要是开发人员），但我认为我没有错。另一方面，如果你修正了X-1列的wdth（比如4中的3列），我想这可能是有可能的，但我认为容器（表）可能是有可能的应该在某个地方有一个特定的宽度。对不起，我帮不了你。@LucianoFantuzzi从逻辑上说，浏览器知道a列需要多少空间来容纳列中的所有内容。考虑到屏幕的宽度，他知道B列有多少空间，如果B列中的文本是e，他会相应地截断文本超出此宽度。无论如何，谢谢。希望CSS导出能够快速进行并回答此问题。@JelmerBrands如果您成功完成此操作，请告诉我们您是如何做到的。浏览器知道所有列的宽度，并根据内容安排空间。浏览器不知道显示的限制是什么“…”除非您设置父容器的宽度。因此，如果您设置了4个列中的3个，那么我猜如果父容器设置了固定的宽度，它将能够剥离内容。即：（100表宽，col1=25，col2=25，col3=25，col4=未指定，因此100-25*3=25，浏览器知道最后一个列宽度）。