CSS: Tablo hücrelerini kısaltın, ancak mümkün olduğunca sığdırın

Fred ile tanışın. O bir masa:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

Fred'in dairesinde garip bir boyut değiştirme alışkanlığı var, bu yüzden diğer tüm birimleri itip Bayan Whitford'un oturma odasını unutulmayacak şekilde içeriğinin bir kısmını gizlemeyi öğrendi:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

Bu işe yarıyor, ancak Fred, sağ hücresinin (Celldito lakaplı) küçük bir yer bırakması durumunda sol hücresinin çok fazla kesilmeyeceği konusunda sinir bozucu bir his var. Aklını kurtarabilir misin?

Özetle: Bir tablonun hücreleri nasıl eşit bir şekilde ve yalnızca tüm boşluklarını bıraktığında taşabilir?

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

Javascript olmayan bir çözümüm olduğuna inanıyorum! Hiç olmadığı kadar iyi geç değil mi? Sonuçta bu mükemmel bir soru ve Google her şeyden önce. Ben bir javascript düzeltme yerleşmek istemiyordu çünkü sayfa yüklendikten sonra hareket eden şeylerin hafif titremesini kabul edilemez olarak buluyorum.

Özellikler :

• Javascript yok
• Sabit düzen yok
• Ağırlık veya yüzde genişlik hilesi yok
• Herhangi bir sayıda sütunla çalışır
• Basit sunucu tarafı oluşturma ve istemci tarafı güncelleme (hesaplama gerekmez)
• Çapraz tarayıcı uyumlu

Nasıl çalışır : Tablo hücresinin içine, içeriğin iki kopyasını nispeten konumlandırılmış bir kap öğesi içine iki farklı öğeye yerleştirin. Ara eleman statik olarak konumlandırılmıştır ve bu nedenle tablo hücrelerinin genişliğini etkileyecektir. Aralayıcı hücrenin içeriğinin sarılmasına izin vererek, aradığımız tablo hücrelerinin "en uygun" genişliğini elde edebiliriz. Bu, görünür içeriğin genişliğini göreceli olarak konumlandırılmış üst öğenin genişliğiyle sınırlamak için kesinlikle konumlandırılmış öğeyi kullanmamızı sağlar.

Test edilen ve çalışan: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

Sonuç Resimleri :

JSFiddle : http://jsfiddle.net/zAeA2/

Örnek HTML / CSS :

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

Birkaç gün önce aynı zorlukla karşılaştım. Görünüşe göre Lucifer Sam en iyi çözümü buldu .

Ancak boşluk elemanında içeriği kopyalamanız gerektiğini fark ettim. Çok kötü olmadığını düşündüm, ancak titlekırpılmış metin için açılır pencere de uygulamak istiyorum . Ve uzun kodun üçüncü kez görüneceği anlamına geliyor.

Burada spacer oluşturmak ve HTML temiz tutmak için sözde öğeden titleöznitelik erişmek için öneriyoruz :after.

IE8 +, FF, Chrome, Safari, Opera üzerinde çalışır

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

Javascript kabul edilebilirse, başlangıç ​​noktası olarak kullanabileceğiniz hızlı bir rutin hazırladım. Pencere yeniden boyutlandırma olaylarına tepki olarak bir aralığın iç genişliğini kullanarak hücre genişliklerini dinamik olarak uyarlamaya çalışır.

Şu anda, her bir hücrenin normal olarak satır genişliğinin% 50'sini aldığını ve taşmayı önlemek için sol hücreyi maksimum genişliğinde tutmak için sağ hücreyi daraltacağını varsaymaktadır. Kullanım durumunuza bağlı olarak çok daha karmaşık genişlik dengeleme mantığı uygulayabilirsiniz. Bu yardımcı olur umarım:

Test için kullandığım satırın işaretlemesi:

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

Yeniden boyutlandırma olayını bağlayan JQuery:

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

Çok daha kolay ve daha zarif bir çözüm var.

Kesmeyi uygulamak istediğiniz tablo hücresinin içine css table-layout: fixed ile bir kapsayıcı div ekleyin. Bu kap, üst tablo hücresinin tam genişliğini alır, böylece duyarlı davranır.

Tablodaki öğelere kesme uyguladığınızdan emin olun.

IE8 + 'dan çalışır

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

ve css:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

İşte çalışan bir Fiddle https://jsfiddle.net/d0xhz8tb/

Sorun, eşit aralıklı sabit genişlikli sütunlar oluşturan 'tablo düzeni: düzeltildi'. Ancak bu css özelliğinin devre dışı bırakılması, metin taşmasını öldürür, çünkü tablo mümkün olduğunca büyük olur (ve taşmaya dikkat edin).

Üzgünüm ama bu durumda Fred kekini yiyip yiyemez .. ev sahibi Celldito'ya ilk etapta çalışmak için daha az yer vermedikçe Fred onu kullanamaz ..

Bunun gibi belirli sütunları "ağırlıklandırmayı" deneyebilirsiniz:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

Ayrıca,% 0 genişlik sütunları kullanma ve white-spaceCSS özelliğinin bir kombinasyonunu kullanma gibi bazı ilginç ince ayarları da deneyebilirsiniz .

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

Kaptın bu işi.

Evet, otuzdot var diyebilirim, bir js yöntemi kullanmazsanız bunu yapmanın bir yolu yoktur. Tanımlamanız gereken karmaşık oluşturma koşullarından bahsediyorsunuz. Örneğin, her iki hücre de daireleri için çok büyük olduğunda ne olur, kimin önceliğine karar vermeniz ya da sadece alanın bir yüzdesini vermeniz gerekir ve eğer bunlar aşırı ise, bu alanı alırlar ve yalnızca birinin boşlukları varsa bacaklarınızı diğer hücreye uzatırsınız, her iki şekilde de css ile yapmanın bir yolu yoktur. İnsanların hiç düşünmediğim css ile yaptıkları bazı korkak şeyler olsa da. Bunu yapabileceğinizden gerçekten şüpheliyim.

Samplebias yanıtı gibi, Javascript kabul edilebilir bir cevapsa, özellikle bu amaç için bir jQuery eklentisi yaptım: https://github.com/marcogrcr/jquery-tableoverflow

Eklentiyi kullanmak için şunu yazın

$('selector').tableoverflow();

Tam örnek: http://jsfiddle.net/Cw7TD/3/embedded/result/

Düzenlemeler:

• IE uyumluluğu için jsfiddle ile düzeltin.
• Daha iyi tarayıcı uyumluluğu (Chrome, Firefox, IE8 +) için jsfiddle'da düzeltme.

Bazı css kesmek kullanın, display: table-column;kurtarmak için gelebilir gibi görünüyor :

<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}

JSFiddle: http://jsfiddle.net/blai/7u59asyp/

Aşağıdaki kuralları ekleyin td:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

Misal:

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

<table border="1">
  <tr>
    <td>content</td>
    <td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
    <td>other content</td>
  </tr>
</table>

Not: Başka bir tduse özelliğine özel genişlik ayarlamak istiyorsanız min-width.

Bu soru Google'da en üste çıkıyor, bu yüzden benim durumumda, https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ adresinden css snippet'ini kullandım, ancak td'ye uygulamak vermedi istenen sonuç.

TD'deki metnin etrafına div etiketi eklemek zorunda kaldım ve üç nokta sonunda işe yaradı.

Kısaltılmış HTML Kodu;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

Kısaltılmış CSS;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

"Nowrap" öğesinin sorunu bir dereceye kadar çözüp çözmediğini kontrol edin. Not: nowrap HTML5'te desteklenmez

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content  </td>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td>
</tr>

sağ hücrenin genişliğini gereken minimum genişliğe ayarlayabilir, ardından sol hücrenin içine taşma gizli + metin taşması uygulayabilirsiniz, ancak Firefox burada buggy ...

rağmen, flexbox yardımcı olabilir

Son zamanlarda üzerinde çalışıyorum. Bu jsFiddle testine göz atın , davranışı kontrol etmek için temel tablonun genişliğini kendiniz değiştirmeyi deneyin).

Çözüm, bir tabloyu diğerine gömmektir:

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

Fred şimdi Celldito'nun genişlemesinden memnun mu?

Bunun kimseye yardımcı olup olmayacağını bilmiyorum, ancak her sütun için yüzde olarak belirli genişlik boyutları belirterek benzer bir sorunu çözdüm. Açıkçası, her sütun çok geniş bir şekilde değişmeyen genişlikte içeriğe sahipse en iyi sonucu verir.

Aynı sorunu yaşadım, ancak birden fazla satır görüntülemem gerekiyordu ( text-overflow: ellipsis;başarısız olduğunda). textareaİçinde bir a kullanarak çözmek TDve sonra bir tablo hücresi gibi davranacak şekilde stil.

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

'Masa düzeni: sabit' temel düzen gereksinimi olduğu göz önüne alındığında, bunun eşit aralıklı ayarlanamayan sütunlar oluşturması, ancak farklı yüzde genişlikteki hücreleri yapmanız, belki de hücrelerinizin 'colspan' değerini bir katına ayarlamanız gerekir?

Örneğin, kolay yüzde hesaplamaları için toplam 100 genişlik kullanmak ve% 80 bir hücreye ve% 20 başka bir hücreye ihtiyacınız olduğunu söylemek:

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

Tabii ki,% 80 ve% 20 sütunlar için, sadece% 100 genişlik hücre colspan'ı 5,% 80 ila 4 ve% 20 ila 1 olarak ayarlayabilirsiniz.