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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

那可能吗 ？怎么样 ？

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

回答：

我是这样做的（您需要添加一个类 ，<td>并将其放在a之间<span>：

<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%;
    }
}

.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将其忘记）并将保持原始行为。

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

以上是 Bootstrap 3以响应方式截断表行内的长文本 的全部内容， 来源链接： utcz.com/qa/426709.html

回到顶部