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.

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