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

问题描述

我使用bootsrap 3表，当我把大文本在表中它被包裹在几行，但我希望它被截断与三个点在末端以响应的方式，而不会弄乱的布局表（我发现一些解决方案，但有不愉快的影响）。

这是可能吗？如何？

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

解决方案

我这样做了（您需要向< td> 文本 c>并将文本放在< span> 之间：

HTML / p>

< 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：省略; 
 display：inline-block; 
 max-width：100％; 
} 
  

它仍然是移动响应

PS ：当然 177px 是一个自定义大小（放任何你需要的） 。

I'm using bootsrap 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).

Is that possible ? how ?

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 equivalent

.table td.text {
    max-width: 177px;
}
.table td.text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

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

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

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