Bootstrap 3以响应的方式截断表格行内的长文本

Question

我正在使用bootstrap 3表,当我把大文本放在表格中时,它会被包裹在几行上,但是我希望它以一个响应的方式在末尾截断三个点,而不会弄乱表格的布局(我找到一些解决方案,但有不愉快的影响).

那可能吗 ？怎么样 ？

PS:欢迎任何解决方案,但我希望它只是HTML/CSS,如果可能的话.

Answer 1

您需要使用table-layout:fixedCSS省略号来处理表格单元格.

.table {
  table-layout:fixed;
}

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

演示:http://bootply.com/9njmoY2CmS

Answer 2

我这样做了(你需要添加一个类的文字来<td>,把一个之间的文本<span>:

HTML

<td class="text"><span>looooooong teeeeeeeeext</span></td>

上海社会科学院

.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是一个自定义尺寸(放置你需要的任何东西).