Dlaczego elipsy CSS nie działają w komórce tabeli?

Ważne jest również, aby umieścić

table-layout:fixed;

Na tabelę zawierającą, więc działa dobrze w IE9 (jeśli używasz max-width), jak również.

Jak wspomniano wcześniej, możesz użyć td { display: block; }, ale to nie pozwala na użycie tabeli.

Możesz użyć table { table-layout: fixed; }, ale może chcesz, aby zachowywał się inaczej dla niektórych columów.

Więc najlepszym sposobem na osiągnięcie tego, co chcesz, byłoby zawinięcie tekstu w <div> i zastosowanie CSS do <div> (nie do <td>) w następujący sposób:

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

Spróbuj użyć max-width zamiast width, tabela będzie nadal obliczać szerokość automatycznie.

Działa nawet w ie11 (z trybem zgodności ie8).

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 .

Strona Demo

Dla tabel o szerokości dynamicznej znalazłem poniżej sposób na uzyskanie satysfakcjonujących wyników. Każdy <th>, który chce mieć możliwość przycinania tekstu powinien mieć wewnętrzny element zawijania, który zawija zawartość <th> pozwolić text-overflow do pracy.

Prawdziwą sztuką jest ustawienie max-width (na <th>) w vw jednostki .

Spowoduje to, że Szerokość elementu zostanie "powiązana" z szerokością viewport (okno przeglądarki) i spowoduje przycinanie treści responsywnych. Ustaw jednostki vw na wymaganą wartość.

Minimal CSS:

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

Demo (z edytowalnymi tekstami):

document.designMode="on"

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>

Po prostu oferując alternatywę, ponieważ miałem ten problem i żadna z innych odpowiedzi tutaj nie przyniosła pożądanego efektu. Więc zamiast tego użyłem listy. Teraz semantycznie informacje, które wyprowadzałem, mogły być traktowane zarówno jako dane tabelaryczne, ale także dane wymienione.

Więc w końcu to co zrobiłem było:

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

Więc w zasadzie ul jest table, li jest tr i span jest td.

Następnie w CSS ustawiam span elementy na display:block; i float:left; (wolę taką kombinację do inline-block Jak to będzie działać w starszych wersjach IE, aby wyczyścić efekt float zobacz: http://css-tricks.com/snippets/css/clear-fix/) i mieć również elipsy:

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

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

Wtedy wystarczy ustawić max-widths swoich zakresów, a to nada liście wygląd tabeli.

Zamiast używać wielokropka do rozwiązania problemu przepełnionego tekstu, odkryłem, że wyłączone i stylizowane wejście wyglądało lepiej i nadal pozwala użytkownikowi przeglądać i zaznaczać cały ciąg znaków, jeśli zajdzie taka potrzeba.

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

Wygląda jak pole tekstowe, ale jest bardziej przyjazne dla użytkownika

Sprawdź box-sizing właściwości css Twoich elementów td. Miałem problem z szablonem css, który ustawia go na wartość border-box. Potrzebujesz zestawu box-sizing: content-box.

Próbowałem wielu z powyższych rozwiązań, ale żaden z nich nie czuł się elastyczny lub satysfakcjonujący.

Ten mały hack o max-width: 1px może być zastosowany bezpośrednio do elementu td

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

Zostaw swoje stoły tak, jak są. Po prostu owinąć zawartość wewnątrz TD z zakresu, który ma CSS okrojenia stosowane.

/* 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>

Jeśli nie chcesz ustawić max-width na td( jak w ta ODPOWIEDŹ), możesz ustawić max-width na div:

function so_hack(){}

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

function so_hack(){}

Uwaga: 100% nie działa, ale 99% działa w FF. Inne nowoczesne przeglądarki nie wymagają głupich hacków div.

td {
  border: 1px solid black;
    padding-left:5px;
    padding-right:5px;
}
td>div{
    max-width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}