Bootstrap 3 以响应方式截断表格行内的长文本 [英] Bootstrap 3 truncate long text inside rows of a table in a responsive way

问题描述

我正在使用 bootstrap 3 表格，当我将大文本放入表格时，它会被包裹在几行上，但我希望它以响应方式在末尾用三个点截断，而不会弄乱表格的布局table(我找到了一些解决方案，但效果不佳).

I'm using bootstrap 3 tables, when i put large text in the table it gets wrapped on several lines, but i want it to be truncated with three dots at the end in a responsive way without messing up the layout of the table (i found some solutions but with unpleasant effects).

这可能吗?怎么样?

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

PS: any solution is welcome, but i would like it to be just HTML/CSS if it's possible.

推荐答案

我是这样做的(你需要在 和将文本放在 之间:

I did it this way (you need to add a class text to <td> and put the text between a <span>:

HTML

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

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

它仍然是移动响应式的(忘记 layout=fixed)并保持原来的行为.

And it will still be mobile responsive (forget it with layout=fixed) and will keep the original behaviour.

PS:当然 177px 是自定义尺寸(随意放置).

PS: Of course 177px is a custom size (put whatever you need).

这篇关于Bootstrap 3 以响应方式截断表格行内的长文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！