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

前端之家收集整理的这篇文章主要介绍了html5 – Bootstrap 3以响应的方式在表的行中截断长文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用bootsrap 3表,当我把大文本在表中它被包裹在几行,但我希望它被截断与三个点在结尾处以响应的方式,而不会弄乱表的布局(i发现一些解决方案,但具有不愉快的效果)。

那可能吗 ?怎么样 ?

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

解决方法

我是这样做的(您需要向< td>添加一个类文本,并将文本放在< span&gt ;: 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%;
}

它仍然是移动响应(忘记它与布局=固定),并将保持原有的行为。

PS:当然177px是一个自定义大小(放任何你需要的)。

原文链接:https://www.f2er.com/html5/169515.html

猜你在找的HTML5相关文章