SORU
20 Mart 2012, Salı


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
9 AĞUSTOS 2012, PERŞEMBE


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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Bryan Smith

    Bryan Smith

    12 Mart 2006
  • Chip Johnson

    Chip Johnson

    30 AĞUSTOS 2007
  • EatingIn

    EatingIn

    12 EKİM 2013