Bootstrap 3 obcina długi tekst wewnątrz wierszy tabeli w sposób responsywny

Question

Używam tabelek bootrap 3, gdy umieszczam duży tekst w tabeli, który jest zawijany na kilku liniach, ale chcę, aby był on ścięty za pomocą trzech kropek na koniec w responsywny sposób, nie psując układu stołu (znalazłem kilka rozwiązań, ale z nieprzyjemnymi efektami).

Czy to możliwe? w jaki sposób ?

PS: każde rozwiązanie jest mile widziane, ale chciałbym, aby był to HTML/CSS, jeśli jest to możliwe.

Answer 1

zrobiłem to w ten sposób (trzeba dodać klasę tekst do <td> i umieścić tekst pomiędzy <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 równoważne

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

I to nadal będzie mobilna reaguje (zapomnij o układzie = fixed) i zachowa oryginalne zachowanie.

PS: Oczywiście 177px jest niestandardowy rozmiar (umieścić co trzeba).

Answer 2

Musisz użyć table-layout:fixed, aby elipsy CSS działały na komórkach tabeli.

.table { 
    table-layout:fixed; 
} 

.table td { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

demo: http://bootply.com/9njmoY2CmS

Answer 3

To co osiągnąłem, ale musiał ustawić szerokość, i nie może być procentowy.

.trunc{ 
 
    width:250px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
table tr td { 
 
padding: 5px 
 
} 
 
table tr td { 
 
background: salmon 
 
} 
 
table tr td:first-child { 
 
background: lightsalmon 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<table> 
 
     
 
     <tr> 
 
     <td>Quisque dignissim ante in tincidunt gravida. Maecenas lectus turpis</td> 
 
     <td> 
 
     <div class="trunc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </div> 
 
    </td> 
 
     </tr> 
 
     </table>

lub to: http://collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/

Answer 4

Używam startowej.
Użyłem parametrów css.

oraz parametry systemu siatki startowej, takie jak to.

<th class="col-sm-2">Name</th> 

<td class="col-sm-2">hoge</td>