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

小编典典

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

css

我使用的是bootstrap3表，当我在表中放入大文本时，它会包裹在多行中，但是我希望它以响应方式在结尾处被三个点截断，而不会弄乱表的布局（i找到了一些解决方案，但效果不佳）。

那可能吗？怎么样？

PS：任何解决方案都是可以接受的，但如果可能的话，我希望它只是HTML / CSS。

阅读 916

2020-05-16

共1个答案

小编典典

我是这样做的（您需要添加一个类文本，<td>并将其放在a之间<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%;
}

而且它仍将是移动响应的（通过layout = fixed将其忘记）并将保持原始行为。

PS ：当然， 177px 是自定义尺寸（输入您需要的尺寸）。

2020-05-16