CSS: Obetnij komórki tabeli, ale zmieści się tak bardzo, jak to możliwe

Poznaj Freda. On jest stołem:

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

Mieszkanie Freda ma dziwaczny zwyczaj zmieniania rozmiaru, więc nauczył się ukrywać część swoich treści, aby nie przepychać wszystkich innych jednostek i nie pchać salonu pani Whitford w zapomnienie:

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

To działa, ale Fred ma dokuczliwe wrażenie, że gdyby jego prawa komórka (którą nazywa się Celldito) poświęciła trochę miejsca, jego lewa komórka nie byłaby skracana przez tak długi czas. Czy możesz ocalić jego zdrowie psychiczne?

Podsumowując: Jak komórki tabeli mogą się przepełniać równomiernie i tylko wtedy, gdy wszystkie z nich zrezygnowały z białych znaków?

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

Wierzę, że mam rozwiązanie inne niż javascript! Lepiej późno niż wcale, prawda? W końcu jest to doskonałe pytanie, a Google ma już dość. Nie chciałem zadowolić się poprawką javascript, ponieważ uważam, że drżenie rzeczy poruszających się po załadowaniu strony jest niedopuszczalne.

Funkcje :

• Bez javascript
• Brak stałego układu
• Bez sztuczek ważenia lub procentowej szerokości
• Działa z dowolną liczbą kolumn
• Proste generowanie po stronie serwera i aktualizacja po stronie klienta (nie są wymagane żadne obliczenia)
• Kompatybilny z wieloma przeglądarkami

Jak to działa : W komórce tabeli umieść dwie kopie treści w dwóch różnych elementach we względnie pozycjonowanym elemencie kontenera. Element dystansowy jest ustawiony statycznie i jako taki wpłynie na szerokość komórek tabeli. Umożliwiając zawijanie zawartości komórki rozdzielającej, możemy uzyskać szerokość „najlepiej dopasowanego” komórek tabeli, których szukamy. To pozwala nam również użyć elementu pozycjonowanego absolutnie, aby ograniczyć szerokość widocznej treści do szerokości elementu pozycjonowanego względnie.

Testowane i działające w: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

Obrazy wynikowe :

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

Przykładowy 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;
}

Kilka dni temu stanąłem przed tym samym wyzwaniem. Wygląda na to, że Lucyfer Sam znalazł najlepsze rozwiązanie.

Zauważyłem jednak, że powinieneś zduplikować zawartość elementu spacer. Myślałem, że nie jest tak źle, ale chciałbym również zastosować titlewyskakujące okienko do przyciętego tekstu. A to oznacza, że ​​długi tekst pojawi się po raz trzeci w moim kodzie.

Tutaj proponuję uzyskać dostęp do titleatrybutu z :afterpseudoelementu, aby wygenerować spacer i utrzymać HTML w czystości.

Działa na IE8 +, FF, Chrome, Safari, Opera

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

Jeśli JavaScript jest akceptowalny, przygotowałem szybką procedurę, którą możesz wykorzystać jako punkt wyjścia. Dynamicznie próbuje dostosować szerokość komórki za pomocą wewnętrznej szerokości przęsła w reakcji na zdarzenia zmiany rozmiaru okna.

Obecnie zakłada się, że każda komórka zwykle uzyskuje 50% szerokości wiersza i zwinie prawą komórkę, aby utrzymać lewą komórkę na maksymalnej szerokości, aby uniknąć przepełnienia. Można zaimplementować znacznie bardziej złożoną logikę równoważenia szerokości, w zależności od przypadków użycia. Mam nadzieję że to pomoże:

Znaczniki dla wiersza, którego użyłem do testowania:

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

JQuery, które łączy zdarzenie zmiany rozmiaru:

$(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);
        }
    });
});

Istnieje o wiele łatwiejsze i bardziej eleganckie rozwiązanie.

W komórce tabeli, którą chcesz zastosować obcinanie, po prostu dołącz div kontenera z układem tabeli css: naprawiono. Ten kontener zajmuje całą szerokość komórki tabeli nadrzędnej, więc działa nawet responsywnie.

Pamiętaj, aby zastosować obcinanie elementów w tabeli.

Działa z IE8 +

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

i css:

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

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

oto działający Fiddle https://jsfiddle.net/d0xhz8tb/

Problemem jest „układ tabeli: naprawiony”, który tworzy kolumny o równej szerokości i stałej szerokości. Ale wyłączenie tej właściwości css zabije przepełnienie tekstu, ponieważ tabela stanie się tak duża, jak to możliwe (i wtedy nie ma przepełnienia).

Przykro mi, ale w tym przypadku Fred nie może dostać swojego ciasta i zjeść go ... dopóki właściciel nie zapewni Celldito mniej miejsca do pracy, Fred nie może użyć swojego ...

Możesz spróbować „zważyć” niektóre kolumny, takie jak to:

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

Możesz także wypróbować bardziej interesujące poprawki, takie jak użycie kolumn o szerokości 0% i użycie kombinacji white-spacewłaściwości CSS.

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

Masz pomysł.

Tak, powiedziałbym, że thirtydot ma to, nie da się tego zrobić, chyba że użyjesz metody js. Mówisz o złożonym zestawie warunków renderowania, które będziesz musiał zdefiniować. np. co się stanie, gdy obie komórki stają się zbyt duże dla swoich mieszkań, będziesz musiał zdecydować, kto ma priorytet, lub po prostu dać im procent powierzchni, a jeśli są one przepełnione, oboje zajmą ten obszar i tylko jeśli jedna ma białe znaki, rozciągasz nogi w drugiej komórce, tak czy inaczej, nie ma możliwości zrobienia tego za pomocą css. Chociaż są pewne fajne rzeczy, które ludzie robią z css, o których nie myślałem. Naprawdę wątpię, żebyś mógł to zrobić.

Podobnie jak w przypadku odpowiedzi samplebias, jeśli JavaScript jest akceptowalną odpowiedzią, stworzyłem wtyczkę jQuery specjalnie do tego celu: https://github.com/marcogrcr/jquery-tableoverflow

Aby użyć wtyczki, po prostu wpisz

$('selector').tableoverflow();

Pełny przykład: http://jsfiddle.net/Cw7TD/3/embedded/result/

Edycje:

• Poprawka w jsfiddle dla kompatybilności z IE.
• Napraw w jsfiddle dla lepszej kompatybilności przeglądarki (Chrome, Firefox, IE8 +).

Użyj hack css, wydaje się, że display: table-column;może przyjść na ratunek:

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

Wystarczy dodać następujące reguły do td:

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

Przykład:

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>

PS: Jeśli chcesz ustawić niestandardową szerokość na inną tdwłaściwość use min-width.

To pytanie pojawia się na górze w Google, więc w moim przypadku użyłem fragmentu css z https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/, ale zastosowanie go do td NIE dało pożądany wynik.

Musiałem dodać znacznik div wokół tekstu w td i elipsa w końcu zadziałała.

Skrócony kod HTML;

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

Skrót CSS;

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

Sprawdź, czy „nowrap” rozwiązuje problem do pewnego stopnia. Uwaga: nowrap nie jest obsługiwany w HTML5

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

możesz ustawić szerokość prawej komórki na minimalną wymaganą szerokość, a następnie zastosować przelew ukryty + przelew tekstowy do wnętrza lewej komórki, ale Firefox jest tutaj wadliwy ...

choć wydaje się, że Flexbox może pomóc

Ostatnio nad tym pracuję. Sprawdź ten test jsFiddle , spróbuj sam, zmieniając szerokość tabeli podstawowej, aby sprawdzić zachowanie).

Rozwiązaniem jest osadzenie tabeli w innym:

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

Czy Fred jest teraz zadowolony z rozszerzenia Celldito?

Nie wiem, czy to pomoże komukolwiek, ale rozwiązałem podobny problem, określając określone rozmiary szerokości w procentach dla każdej kolumny. Oczywiście działałoby to najlepiej, gdyby każda kolumna zawierała treść o szerokości, która nie różni się zbytnio.

Miałem ten sam problem, ale musiałem wyświetlić wiele wierszy (w przypadku text-overflow: ellipsis;niepowodzenia). Rozwiązuję go za pomocą textareawewnętrznej a, TDa następnie projektuję go tak, aby zachowywał się jak komórka tabeli.

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

Biorąc pod uwagę, że „układ tabeli: ustalony” jest niezbędnym wymogiem układu, że tworzy to równomiernie rozmieszczone nieregulowane kolumny, ale że musisz tworzyć komórki o różnych wartościach procentowych, być może ustawisz „colspan” swoich komórek na wielokrotność?

Na przykład, używając całkowitej szerokości 100 do łatwych obliczeń procentowych i mówiąc, że potrzebujesz jednej komórki 80%, a drugiej 20%, rozważ:

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

Oczywiście, w przypadku kolumn 80% i 20%, możesz po prostu ustawić zakres szerokości komórki 100% na 5, 80% na 4, a 20% na 1.