CSS üç nokta neden tablo hücresinde çalışmıyor?

Aşağıdaki örneği düşünün: ( burada canlı demo )

$(function() {
  console.log("width = " + $("td").width());
});

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

Çıktı: width = 139ve üç nokta görünmüyor.

Burada neyi özlüyorum?

Görünüşe göre, ekleniyor:

td {
  display: block; /* or inline-block */
}

sorunu da çözer.

Bir başka olası çözüm table-layout: fixed;de masayı ayarlamak ve ayrıca ayarlamaktır width. Örneğin: http://jsfiddle.net/fd3Zx/5/

Koymak da önemlidir

table-layout:fixed;

İçeren tabloya göre, IE9'da da iyi çalışır (maksimum genişliği kullanırsanız).

Daha önce de söylediğimiz gibi kullanabilirsiniz td { display: block; }ama bu bir masa kullanma amacını ortadan kaldırır.

Kullanabilirsiniz table { table-layout: fixed; }ama belki bazı kolonlar için farklı davranmasını istiyorsunuz.

Dolayısıyla, istediğinizi elde etmenin en iyi yolu, metninizi bir içine sarmak <div>ve CSS'nizi şuna <div>(değil <td>) uygulamaktır:

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

max-widthBunun yerine kullanmayı deneyin width, tablo yine de genişliği otomatik olarak hesaplayacaktır.

ie11İçinde bile çalışır (ie8 uyumluluk modunda).

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle .

Demo sayfası

Dinamik genişliğe sahip tablolar için, tatmin edici sonuçlar üretmenin aşağıdaki yolunu buldum. Her <th>içeriğini sarar bir iç sarma elemanı olmalıdır kesilmiş metin yeteneğine sahip olmak istediği edildiği <th>izin text-overflowişe.

Gerçek numara, birimler halindemax-width (üzerinde <th>) ayarlamaktır .vw

Bu, etkin bir şekilde öğenin genişliğinin görüntü alanı genişliğine (tarayıcı penceresi) "bağlanmasına" neden olacak ve duyarlı bir içerik kırpılmasına neden olacaktır. vwBirimleri gereken tatmin edici bir değere ayarlayın .

Minimal CSS:

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

İşte çalıştırılabilir bir demo:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

Bu sorunu yaşadığım için bir alternatif öneriyorum ve buradaki diğer cevapların hiçbiri istediğim etkiyi vermedi. Bunun yerine bir liste kullandım. Şimdi, anlamsal olarak çıktısını aldığım bilgi hem tablo verileri hem de listelenen veriler olarak kabul edilebilirdi.

Sonunda yaptığım şey şuydu:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

Yani temelde ulolduğunu table, liolup trve spanbir td.

Daha sonra CSS'de spanöğeleri olacak şekilde ayarlıyorum display:block;ve float:left;(bu kombinasyonun inline-blockIE'nin eski sürümlerinde çalışacağı için olmasını tercih ediyorum , kayma efektini temizlemek için bkz: http://css-tricks.com/snippets/css/clear- fix / ) ve ayrıca elipslere sahip olmak için:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Sonra tek yapmanız gereken, max-widthsaralıklarınızı ayarlamaktır ve bu, listeye bir tablo görünümü verecektir.

Taşan metin sorununu çözmek için üç nokta kullanmak yerine, devre dışı bırakılmış ve stilize edilmiş bir girişin daha iyi göründüğünü ve yine de kullanıcının gerekirse tüm dizeyi görüntüleyip seçmesine izin verdiğini gördüm.

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

Bir metin alanına benziyor ancak vurgulanabilir olduğundan daha kullanıcı dostudur

Öğelerinizin box-sizingcss özelliğini kontrol edin td. Onu border-boxdeğere ayarlayan css şablonuyla ilgili sorun yaşadım . Ayarlanmalısın box-sizing: content-box.

Masalarınızı olduğu gibi bırakın. İçeriği TD'lerin içine, kesme CSS'si uygulanmış bir aralıkla sarın.

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Yukarıdaki çözümlerin çoğunu denedim ama hiçbiri esnek veya tatmin edici gelmedi.

Max-width: 1px olan bu küçük hack, doğrudan td öğesine uygulanabilir

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

Maksimum genişliği td olarak ayarlamak istemiyorsanız ( bu cevapta olduğu gibi ), maksimum genişliği div olarak ayarlayabilirsiniz:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

Not:% 100 çalışmaz, ancak FF'de% 99 hile yapar. Diğer modern tarayıcıların aptalca div hack'lerine ihtiyacı yoktur.

td {
  kenarlık: 1px düz siyah;
    sol dolgu: 5px;
    padding-right: 5px;
}
td> div {
    maksimum genişlik:% 99;
    taşma: gizli;
    metin taşması: üç nokta;
    beyaz boşluk: nowrap;

}