Bootstrap 3 bir satırın içindeki metinleri duyarlı bir şekilde kesmek

Question

Bootsrap 3 tabloları kullanıyorum, tabloya büyük metin koyarken birkaç satıra sarılır ancak üç nokta ile kırpılmasını istiyorum sonunda masa düzenini bozmadan duyarlı bir şekilde (bazı çözümler buldum ama hoş olmayan etkileri ile).

Bu mümkün mü? Nasıl ?

PS: Herhangi bir çözüm kabul edilir, ancak mümkün ise sadece HTML/CSS olmasını isterim.

Answer 1

Ben öyle yaptım (eğer <td> bir sınıf metin ekleyip arasında metin koymak gerekir bir <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%; 
} 

eşdeğer Ve hala duyarlı mobil olacaktır (düzeniyle unutmak = sabit) ve orijinal davranışını devam edecektir.

PS: 177px bir özel boyut (ne gerek koymak) 'dir Tabii.

Answer 2

CSS elipsinin tablo hücrelerinde çalışması için table-layout:fixed kullanmanız gerekir.

.table { 
    table-layout:fixed; 
} 

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

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

Answer 3

Bu, başardığımız ama genişliğini ayarlamak için vardı ve Percentual olamaz budur.

veya bu

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

: Ben ön yükleme alanı kullanıyorum http://collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/

Answer 4

.
CSS parametrelerini kullandım. Böyle

.table { 
    table-layout:fixed; 
} 

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

ve önyükleme ızgara sistemi parametreleri,.

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

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