Tablo hücresinde CSS metin taşması?

text-overflowMetin bir satıra sığmayacak kadar uzunsa, birden çok satıra sarılmak yerine üç nokta ile klipslenecek şekilde bir tablo hücresinde CSS kullanmak istiyorum . Mümkün mü?

Bunu denedim:

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

Ancak, white-space: nowrapmetnin (ve hücresinin) sürekli olarak sağa doğru genişlediği görülüyor ve tablonun toplam genişliğini kabının genişliğinin ötesine itiyor. Bununla birlikte, metin hücrenin kenarına çarptığında birden çok satıra kaymaya devam eder.

Bir tablo hücresinden taştığında üç nokta içeren bir metni kırpmak için, taşmanın çalışması için max-widthher tdsınıfta CSS özelliğini ayarlamanız gerekir . Ek yerleşim bölmesine gerek yoktur

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Duyarlı düzenler için; max-widthsütunun etkin minimum genişliğini belirtmek için CSS özelliğini kullanın veya yalnızca max-width: 0;sınırsız esneklik için kullanın . Ayrıca, içeren tablonun tipik olarak belirli bir genişliğe ihtiyacı olacaktır width: 100%;ve sütunların genişlikleri genellikle toplam genişliğin yüzdesi olarak ayarlanacaktır

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

Geçmiş: IE'ye özgü bir oluşturma sorununu gidermek için IE 9 (veya daha az) için bunu HTML'nizde bulundurmanız gerekir

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

A max-widthveya sabit genişlik belirtmek tüm durumlar için geçerli değildir ve tablo akıcı olmalı ve hücrelerini otomatik boşluk bırakmalıdır. Tablolar bunun için.

Bunu kullanın: http://jsfiddle.net/maruxa1j/

HTML:

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS:

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

IE9 ve diğer tarayıcılarda çalışır.

Bu neden oluyor?

Görünüşe göre w3.org'daki bu bölüm, metin taşmasının yalnızca blok öğeleri için geçerli olduğunu göstermektedir :

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

MDN aynısını söylüyor .

Bu jsfiddle , bir divyerine uygulandığında iyi çalışan kodunuza (birkaç hata ayıklama değişikliği ile) sahiptir td. Ayrıca, tdiçerdiği bir divbloğun içeriğini sararak hızlı bir şekilde düşünebildiğim tek geçici çözüm var . Ancak, bu bana "çirkin" işaretleme gibi görünüyor, bu yüzden başka birisinin daha iyi bir çözüm olmasını umuyorum. Bunu test etmek için kod şöyle görünür:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

Herhangi bir şeye sabit genişlik ayarlamak istemiyorsanız

Aşağıdaki çözüm, uzun, ancak üst tablonun genişliğini veya üst satırın yüksekliğini etkilememesi gereken tablo hücresi içeriğine sahip olmanızı sağlar. Örneğin, width:100%diğer tüm hücrelere otomatik boyut özelliği uygulayan bir tablo olmasını istediğiniz yerde . "Notlar" veya "Yorum" sütunu veya başka bir şey içeren veri ızgaralarında kullanışlıdır.

Bu 3 kuralı CSS'nize ekleyin:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

Dinamik metin taşmasını istediğiniz herhangi bir tablo hücresinde HTML'yi şu şekilde biçimlendirin:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

Ek min-widtholarak tablo hücresine istediğinizi (veya hiçbirini) uygulayın.

Tabii ki keman: https://jsfiddle.net/9wycg99v/23/

Öğe table-layout: fixed;üzerinde belirtirseniz , tableiçin stillerinizin tdetkili olması gerekir. Ancak bu, hücrelerin boyutlarını da etkileyecektir.

Sitepoint burada tablo düzeni yöntemlerini biraz tartışıyor: http://reference.sitepoint.com/css/tableformatting

Yalnızca tablonun otomatik yerleşimini istiyorsanız

Olmadan kullanılarak max-widthveya yüzde kolon genişlikleri veya table-layout: fixedvs.

https://jsfiddle.net/tturadqq/

Nasıl çalışır:

Adım 1: Sadece tablo otomatik düzeni işini yapsın.

Çok fazla metne sahip bir veya daha fazla sütun olduğunda, diğer sütunları olabildiğince küçültür, ardından uzun sütunların metnini sarar:

Adım 2: Hücre içeriğini bir div içine sarın ve ardından div öğesini max-height: 1.1em

(fazladan 0.1em, metin tabanının biraz altında, 'g' ve 'y' kuyruğu gibi görünen karakterler içindir)

3. Adım: titleDiv'leri ayarlayın

Bu erişilebilirlik için iyidir ve bir anda kullanacağımız küçük numara için gereklidir.

Adım 4: Bir CSS ekleyin ::afterdiv

Bu biraz zor. Biz CSS set ::afterile, content: attr(title)daha sonra, pozisyon bu div ve setin üstünde text-overflow: ellipsis. Netleştirmek için burada kırmızı renk aldım.

(Uzun sütunun artık kuyruk üç noktaya nasıl sahip olduğuna dikkat edin)

5. Adım: Div metninin rengini transparent

Ve işimiz bitti!

Tablo genişliği yüzdesindeyse veya tablo hücresinde sabit genişliği ayarlayamazsanız. Çalıştırmak için başvurabilirsiniz table-layout: fixed;.

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

Hücre içeriğini esnek bir blokta sarın. Bir bonus olarak, hücre otomatik görünür genişliğe uyar.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

Ben hücre içinde (göreceli) kesinlikle konumlandırılmış bir div kullanarak bunu çözdü.

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

Bu kadar. Ardından div öğesine bir top: değeri ekleyebilir veya dikey olarak ortalayabilirsiniz:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

Sağ tarafta biraz yer açmak için maksimum genişliği biraz azaltabilirsiniz.

Bu benim durumumda, hem Firefox hem de Chrome'da çalıştı:

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

Bu, IE 9'da çalışan sürümdür.

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. 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>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - 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>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>