Obcinanie długich łańcuchów za pomocą CSS: czy jest to jeszcze możliwe?

Czy istnieje dobry sposób obcinania tekstu za pomocą zwykłego HTML i CSS, aby zawartość dynamiczna mieściła się w układzie o stałej szerokości i wysokości?

Obcinam po stronie serwera o szerokość logiczną (tj. Ślepo odgadniętą liczbę znaków), ale ponieważ „w” jest szersze niż „i”, to zwykle nie jest optymalne i wymaga ode mnie ponownego odgadnięcia ( i dostrajaj) liczbę znaków dla każdej stałej szerokości. Najlepiej byłoby, gdyby obcięcie nastąpiło w przeglądarce, która zna fizyczną szerokość renderowanego tekstu.

Przekonałem się, że IE ma text-overflow: ellipsiswłaściwość, która robi dokładnie to, co chcę, ale potrzebuję tego, aby działała w różnych przeglądarkach. Ta właściwość wydaje się (nieco?) Standardowa, ale nie jest obsługiwana przez Firefox. Znalazłem różne obejścia na podstawie overflow: hidden, ale albo nie wyświetlają wielokropka (chcę, aby użytkownik wiedział, że treść została obcięta), albo wyświetlają ją przez cały czas (nawet jeśli treść nie została obcięta).

Czy ktoś ma dobry sposób na dopasowanie dynamicznego tekstu w ustalonym układzie, czy też obcinanie po stronie serwera o logiczną szerokość jest tak dobre, jak na razie?

Aktualizacja: text-overflow: ellipsisjest teraz obsługiwana od wersji Firefox 7 (wydanej 27 września 2011 r.). Tak! Moja oryginalna odpowiedź jest historycznym zapisem.

Justin Maxwell ma rozwiązanie CSS dla różnych przeglądarek. Ma jednak tę wadę, że nie pozwala na zaznaczanie tekstu w przeglądarce Firefox. Sprawdź jego post gościnny na blogu Matta Snidera, aby uzyskać szczegółowe informacje na temat tego, jak to działa.

Uwaga: ta technika zapobiega również aktualizacji zawartości węzła w JavaScript przy użyciu innerHTMLwłaściwości w Firefox. Obejście tego problemu znajduje się na końcu tego postu.

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml zawartość pliku

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Aktualizowanie zawartości węzła

Aby zaktualizować zawartość węzła w sposób działający w przeglądarce Firefox:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

Zobacz post Matta Snidera, aby uzyskać wyjaśnienie, jak to działa .

Marzec 2014: Obcinanie długich ciągów za pomocą CSS: nowa odpowiedź z naciskiem na obsługę przeglądarki

Demo na http://jsbin.com/leyukama/1/ (używam jsbin, ponieważ obsługuje starą wersję IE).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

Właściwość -ms-text-overflow CSS nie jest konieczna: jest to synonim właściwości CSS z przepełnieniem tekstu, ale wersje IE od 6 do 11 już obsługują właściwość CSS z przepełnieniem tekstu.

Pomyślnie przetestowano (na Browserstack.com) w systemie operacyjnym Windows dla przeglądarek internetowych:

• IE6 do IE11
• Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
• Chrome 14, Chrome 20, Chrome 25
• Safari 4.0, Safari 5.0, Safari 5.1
• Firefox 7.0, Firefox 15

Firefox: jak wskazał Simon Lieschke (w innej odpowiedzi), Firefox obsługuje tylko właściwość CSS z przepełnieniem tekstu od Firefox 7 (wydana 27 września 2011 r.).

Dokładnie sprawdziłem to zachowanie w Firefox 3.0 i Firefox 6.0 (przepełnienie tekstu nie jest obsługiwane).

Konieczne byłyby dalsze testy w przeglądarkach systemu Mac OS.

Uwaga: możesz pokazać etykietkę po najechaniu myszką po zastosowaniu elipsy, można to zrobić za pomocą javascript, zobacz następujące pytania: Wykrywanie elipsy z przepełnieniem tekstu HTML i HTML - jak mogę wyświetlać etykietkę TYLKO po aktywacji elipsy

Zasoby:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Jeśli nie masz nic przeciwko rozwiązaniu JavaScript, istnieje wtyczka jQuery, która robi to w przeglądarce internetowej - patrz http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-via-jquery /

OK, Firefox 7 zaimplementowany, text-overflow: ellipsisjak również text-overflow: "string". Ostateczne wydanie planowane jest na 27.09.2011.

Innym rozwiązaniem tego problemu może być następujący zestaw reguł CSS:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

Jedyną wadą powyższego CSS jest to, że dodaje „...” niezależnie od tego, czy tekst przepełnia kontener, czy nie. Jeśli jednak masz przypadek, w którym masz wiele elementów i masz pewność, że zawartość się przepełni, ten byłby prostszy zestaw reguł.

Moje dwa centy. Czapki z głów od oryginalnej techniki Justina Maxwella