Pytanie w sprawie css, css3, html, ellipsis – Dlaczego elipsa CSS nie działa w komórce tabeli?

130

Rozważmy następujący przykład: (tutaj demo na żywo)

HTML:

<code><table>
  <tbody>
    <tr><td>Hello Stack Overflow</td></tr>
  </tbody>
</table>
</code>

CSS:

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

JS:

<code>$(function() {
  console.log("width = " + $("td").width());
});
</code>

Dane wyjściowe to:width = 139, a elipsa nie pojawia się.

Czego mi tu brakuje?

@FlorianMargaine Właściwie to drugie pytanie zapewnia obejście: umieść div w komórce o żądanej szerokości. Mr Lister
Nadal jednak preferuję odpowiedzi wymienione na tej stronie. Florian Margaine
Jakoś powielać, ale odpowiedź nie zapewnia obejścia (jak robi Arlen Cuss). Florian Margaine

Twoja odpowiedź

10   odpowiedzi
95

Najwyraźniej dodając:

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

rozwiązuje również problem.

Innym możliwym rozwiązaniem jest ustawienietable-layout: fixed; na stół, a także ustawić towidth. Na przykład:http://jsfiddle.net/fd3Zx/5/

display: block; rodzaj porażki w celu użycia tabeli. Lubiętable-layout: fixed; opcja, działała dobrze dla mnie. Alex K
Dokładnie. Elementy zdisplay: table-cell (domyślnie dlatd elementy) nie akceptuj szerokości. Michael Mior
Czasami chcę dodać* {display: block} do moich arkuszy stylów ... Jrop
table-layout:fixed rozdziela szerokość kolumn w mniej inteligentny sposób. Czy istnieje inna opcja, która przypisze szerokość kolumny w ten sam sposóbtable-layout: normal a mimo to poprawnie wyświetlać wielokropek? nest
15
Strona demonstracyjna

a uzyskanie satysfakcjonujących wyników. Każdy<th> który chce mieć możliwość przycinania tekstu, powinien mieć wewnętrzny element owijający, który zawija zawartość<th> dopuszczaćtext-overflow pracować.

Wtedy prawdziwą sztuczką jest ustawieniemax-width (na<th>) wvw jednostki.

To spowoduje, że szerokość elementu zostanie „powiązana” z szerokością rzutni (okno przeglądarki) i spowoduje wyciszenie treści. Ustawvw jednostki do wymaganej wartości.

Minimalny CSS:
<code>th{ max-width:10vw; }

th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}
</code>
Oto runnable demo:

<code>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;
}</code>
<code><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></code>

34

max-width zamiastwidth, tabela automatycznie obliczy szerokość automatycznie.

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

<code>td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>
<code><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></code>

jsfiddle.

Dobrze zauważony. Prawdopodobnie najlepiej jest użyćobie, tak że element ma stałą szerokość. W przeciwnym razie może być krótszy, jeśli zawartość na to pozwala. LSerni
68

td { display: block; } ale to pokonuje cel użycia stołu.

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

Najlepszym sposobem na osiągnięcie tego, co chcesz, jest zawinięcie tekstu w<div> i zastosuj swój CSS do<div> (nie do<td>) lubię to :

<code>td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</code>
To rzeczywiście najlepsze rozwiązanie, jakie widziałem na elipsach w tabelach. membersound
To najprostsza metoda, którą widziałem i działa w IE8. Keith Ketterer
73

Ważne jest również, aby to zrobić

<code>table-layout:fixed;
</code>

Na tabelę zawierającą, więc działa dobrze również w IE9 (jeśli wykorzystujesz maksymalną szerokość).

zapewni to również, że przepełnienie tekstu działa w responsywnych układach jao
Właśnie tego potrzebowałem. Mam szerokość stołu 100%. I wszystkie kolumny z wyjątkiem jednej o stałej szerokości. Dzięki temu ostatnia kolumna zajmuje tyle miejsca, ile zostało. matthew_360
3

ponieważ miałem ten problem i żadna z pozostałych odpowiedzi nie miała pożądanego efektu. Zamiast tego użyłem listy. Teraz semantycznie informacje, które wyprowadzałem, mogły zostać uznane za dane tabelaryczne, ale także dane z listy.

Tak więc ostatecznie zrobiłem to:

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

Więc w zasadzieul jesttable, li jesttr, ispan jesttd.

Następnie w CSS ustawiłemspan elementy, które mają byćdisplay:block; ifloat:left; (Wolę tę kombinację niżinline-block ponieważ będzie działać w starszych wersjach IE, aby usunąć efekt float, zobacz:http://css-tricks.com/snippets/css/clear-fix/) i mieć również elipsy:

<code>span {
    display: block;
    float: left;
    width: 100%;

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

Następnie wszystko, co musisz zrobić, to ustawićmax-widths twoich rozpiętości, a to da liście wygląd tabeli.

0

jakie są. Wystarczy zawinąć zawartość wewnątrz TD za pomocą zakresu, w którym zastosowano CSS obcinania.

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

odkryłem, że wyłączone i stylizowane wejście wyglądało lepiej i nadal pozwala użytkownikowi przeglądać i wybierać cały ciąg, jeśli jest to konieczne.

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

Wygląda jak pole tekstowe, ale jest w stanie wyróżnić, dzięki czemu jest bardziej przyjazny dla użytkownika

Nie jest przyjazny dla użytkownika, ponieważ korzystanie z technologii wspomagających powoduje błędne odczytanie go jako danych wejściowych, więc użytkownik uważa, że ​​może coś wprowadzić. Niewłaściwe jest użycie semantyki elementów. Carlo
1

box-sizing Właściwość css twojegotd elementy. Miałem problem z szablonem css, który go ustawiaborder-box wartość. Musisz ustawićbox-sizing: content-box.

0

Jeśli nie chcesz ustawić max-width na td (jak wta odpowiedź), możesz ustawić max-width na div:

<code>function so_hack(){}
</code>

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

<code>function so_hack(){}
</code>

Uwaga: 100% nie działa, ale 99% wykonuje sztuczkę w FF. Inne nowoczesne przeglądarki nie potrzebują głupich hacków.

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

}

Powiązane pytania