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

2014 Marzec: Obcinanie długich łańcuchó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ść CSS-ms-text-overflow nie jest konieczna: jest synonimem właściwości CSS text-overflow, ale wersje IE od 6 do 11 już obsługują właściwość CSS text-overflow.

Pomyślnie przetestowany (na Browserstack.com) w systemie operacyjnym Windows, dla sieci przeglądarki:

• 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 zauważył Simon Lieschke (w innej odpowiedzi), Firefox obsługuje tylko właściwość CSS text-overflow począwszy od Firefoksa 7 (wydany 27 września 2011).

Dwukrotnie sprawdzałem to zachowanie na Firefoksie 3.0 i Firefoksie 6.0 (text-overflow nie jest obsługiwany).

Potrzebne byłyby dalsze testy na przeglądarkach internetowych z systemem Mac OS.

Uwaga: możesz chcieć pokazać podpowiedź po najechaniu myszką, gdy zastosowana jest elipsa, można to zrobić za pomocą javascript, zobacz następujące pytania: HTML text-overflow ellipsis detection and HTML-How can I show tooltip ONLY when ellipsis is aktywowane

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 sposób między przeglądarkowy-zobacz http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/

OK, Firefox 7 zaimplementował text-overflow: ellipsis oraz text-overflow: "string". Premiera planowana jest na 2011-09-27.

Innym rozwiązaniem 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 dodałby "..."niezależnie od tego, czy tekst-przepełnia kontener, czy nie. Mimo to, jeśli masz przypadek, w którym masz kilka elementów i jesteś pewien, że zawartość przepełni się, ten byłby prostszym zestawem reguł.

W przeglądarce Firefox można korzystać z funkcji śledzenia błędów w przeglądarce Firefox. Wygląda na to, że Firefox jest jedyną główną przeglądarką, która nie obsługuje natywnego rozwiązania CSS.

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