Bootstrap 3 tronca un lungo testo all'interno delle righe di una tabella in modo reattivo

Question

Sto usando le tabelle bootsrap 3, quando inserisco un testo grande nella tabella viene avvolto su più righe, ma voglio che venga troncato con tre punti alla fine in modo reattivo senza rovinare il layout del tavolo (ho trovato alcune soluzioni ma con effetti spiacevoli).

È possibile? Come ?

PS: qualsiasi soluzione è benvenuta, ma mi piacerebbe che fosse solo HTML/CSS se è possibile.

Answer 1

ho fatto in questo modo (è necessario aggiungere una classe testo-<td> e mettere il testo tra un <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 equivalente

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

E sarà ancora essere mobile reattivo (dimenticarlo con layout = fisso) e non mancherà di tenere il comportamento originale.

PS: Naturalmente 177px è un formato personalizzato (mettere qualunque cosa avete bisogno).

Answer 2

È necessario utilizzare table-layout:fixed affinché gli ellissi CSS funzionino sulle celle della tabella.

.table { 
    table-layout:fixed; 
} 

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

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

Answer 3

Questo è quello che raggiunto, ma ha dovuto impostare la larghezza, e non posso essere percentuale.

.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>

o questo: http://collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/

Answer 4

sto usando bootstrap.
Ho usato i parametri css.

.table { 
    table-layout:fixed; 
} 

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

e bootstrap parametri di sistema griglia, come questo.

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

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