Metin taşması bir tablo hücresine CSS?
CSS metin tek bir satıra sığmayacak kadar uzun ise, birden fazla satır için kaydırma yerine üç nokta klibi edecek bir tablo hücresine text-overflow
gibi kullanmak istiyorum. Bu mümkün mü?
Bunu denedim:
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
Ama white-space: nowrap
metin (cep) sürekli sağa dışarı genişletmek için, içinde bulunduğu kabın genişliği ötesinde tablonun toplam genişliği bastırıyor gibi görünüyor. O olmadan, ancak, metni hücrenin kenarına çarpınca birden fazla satır için kaydırma devam ediyor.
CEVAP
Bir tablo hücresi taşana zaman üç nokta ile metin klibi için çalışmaya taşması için td
her bir sınıf max-width
CSS özelliği ayarlamak gerekir. Ekstra bir düzeni gerekli olan div
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Duyarlı düzenleri için; max-width
CSS özelliği sütunun etkili minimum genişliğini belirleyin, ya da sadece sınırsız esneklik için max-width: 0;
kullanın. Ayrıca, içeren tablo belirli bir genişlik, width: 100%;
ve sütunlar tipik olarak toplam genişliğinin yüzdesi olarak genişliği ayarlanmış olacak genellikle gerekir
table {
width: 100%;
}
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.columnA {
width: 30%;
}
td.columnB {
width: 70%;
}
IE 9 (veya daha az) HTML içinde bu var, YANİ özel işleme sorunu düzeltmek gerekir . tarihi:
<!--[if IE]>
<style>
table {
table-layout: fixed;
width: 100px;
}
</style>
<![endif]-->
Nasıl metin önlemek için sarma bir tab...
Nasıl hizalamak için merkezi bir html ...
Eğer altı çizili metin olup olmadığını...
metin taşması:Firefox 4'te üç nokta? (...
Bir DİV tüm tablo hücresine dolgu yapm...