W CSS użyj „…” dla przepełnionego bloku wielu linii

303

z

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

„...” pojawi się na końcu linii, jeśli zostanie przepełniona. Zostanie to jednak pokazane tylko w jednym wierszu. Ale chciałbym, aby był wyświetlany w wielu liniach.

Może wyglądać następująco:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+
Ovilia
źródło
3
Jeśli są to osobne linie, naprawdę musisz się martwić o wykonanie jednej linii i powtórzenie funkcji dla każdej linii. Jeśli wszystkie te linie należą do tego samego zdania, prawdopodobnie trzymaj wielokropek tylko w ostatnim wierszu. Jeśli używasz wielokropka w trakcie zdania, zasadniczo robisz dziurę w tym zdaniu.
Wex,
4
dobry artykuł na ten temat css-tricks.com/line-clampin
Adrien Be
Proszę zobaczyć następujący link do mojej odpowiedzi: stackoverflow.com/questions/536814/…
Shishir Arora
Odpowiedziałem na to bardzo szczegółowo z czystym rozwiązaniem CSS tutaj . Działa niezawodnie. Jak wspomniano w tej odpowiedzi, jest to o wiele łatwiejsze w przypadku Javascript, ale jeśli nie jest to możliwe, działa .
deska rozdzielcza

Odpowiedzi:

84

Istnieje również kilka wtyczek jquery, które rozwiązują ten problem, ale wiele nie obsługuje wielu wierszy tekstu. Następujące prace:

Istnieją również testy wydajności .

Jim Thomas
źródło
57
Nie widziałem żadnych czystych rozwiązań css dla tego wymagania
Jim Thomas
@Ovilia zauważa, że ​​rozwiązanie Jima obejmuje również wtyczkę jQuery o nazwie jquery.autoellipsis.js, musisz pobrać dodatek osobno
Jeff
7
CSS Multiline Elipsis Tutorial: mobify.com/dev/multiline-ellipsis-in-pure-css
Julien
2
Drodzy ludzie z przyszłości: ta wtyczka jest moją ulubioną, ponieważ umożliwia przełączanie wyświetlania ukrytego tekstu. http://keith-wood.name/more.html
brichins
1
Wszystkie biblioteki, które dodałem, są dobre. Testy wydajności mogą pomóc w podjęciu decyzji, ale chciałbym wspomnieć, że zwykle wdrażamy dotdotdot ze względu na szeroki zakres konfiguracji i czysty kod - łatwy do modyfikacji. (Uwaga, to tylko osobisty punkt widzenia - który nie należy do odpowiedzi.)
Milan Jaros,
58

Włamałem się, dopóki nie udało mi się osiągnąć czegoś zbliżonego do tego. Ma kilka zastrzeżeń:

  1. To nie jest czysty CSS; musisz dodać kilka elementów HTML. JavaScript nie jest jednak wymagany.
  2. Elipsa jest wyrównana do prawej w ostatnim wierszu. Oznacza to, że jeśli twój tekst nie jest wyrównany do prawej ani wyrównany, może istnieć zauważalna przerwa między ostatnim widocznym słowem a wielokropkiem (w zależności od długości pierwszego ukrytego słowa).
  3. Miejsce na elipsę jest zawsze zarezerwowane. Oznacza to, że jeśli tekst wpasowuje się w ramkę prawie dokładnie, może zostać niepotrzebnie obcięty (ostatnie słowo jest ukryte, chociaż technicznie nie musiałoby).
  4. Twój tekst musi mieć stały kolor tła, ponieważ używamy kolorowych prostokątów, aby ukryć elipsę w przypadkach, gdy nie jest to potrzebne.

Powinienem również zauważyć, że tekst zostanie złamany na granicy słowa, a nie granicy znaku. Było to celowe (ponieważ uważam to za lepsze w przypadku dłuższych tekstów), ale ponieważ różni się od tego text-overflow: ellipsis, co robi, pomyślałem, że powinienem o tym wspomnieć.

Jeśli możesz żyć z tymi zastrzeżeniami, HTML wygląda następująco:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

I to jest odpowiedni CSS, na przykładzie pola o szerokości 150 pikseli z trzema liniami tekstu na białym tle. Zakłada się, że masz reset CSS lub podobny, który ustawia marginesy i wypełnienia na zero w razie potrzeby.

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

Wynik wygląda następująco:

obraz renderowanego wyniku o różnych długościach tekstu

Aby wyjaśnić, jak to działa, oto ten sam obraz, z wyjątkiem tego, że .hidedots1jest podświetlony na czerwono i .hidedots2cyjan. Oto prostokąty, które ukrywają elipsę, gdy nie ma niewidocznego tekstu:

taki sam obraz jak powyżej, z tym wyjątkiem, że elementy pomocnicze są podświetlone kolorem

Testowane w IE9, IE8 (emulowane), Chrome, Firefox, Safari i Opera. Nie działa w IE7.

balpha
źródło
9
Tak naprawdę nie potrzeba 4 elementy HTML, warunkiem your textjest opatrywana <p>tagów (jak powinny być), a następnie można użyć .ellipsify p:beforei .ellipsify p:afterwtedy oczywiście trzeba jest kod na elipsy, również mogą potrzebować , ponieważ nie może działać dla pustych elementów. .ellipsify p:before{content:"\2026";}\2026content:" ";
Val
2
Chociaż nie sądzę, aby ta odpowiedź pasowała do wielu sytuacji, dostępna jest przynajmniej odpowiedź bez wtyczki i JavaScript. Właśnie dlatego i pomysłowość, z jaką skonstruowałem tę odpowiedź, właśnie to robię +1.
VoidKing
@MichalStefanow Tylko jeden - ten, dla którego go stworzyłem: Opisy „kart” aplikacji w Apptivate.MS, np. Patrz apptivate.ms/users/1141291/blynn .
balpha
@Pavlo, naprawdę podoba mi się twoje rozwiązanie. Ale wydaje się, że działa tylko z podanym standardowym tekstem, a nie jeśli załaduję tekst z bazy danych, bo skrypt nie zna zewnętrznej wysokości załadowanego tekstu?
JonSnow
2
@SchweizerSchoggi, pseudoelementy lub nie, to rozwiązanie nie opiera się na JS. Nie powinno mieć znaczenia, skąd otrzymasz tekst, jeśli poprawnie go zaimplementujesz.
Pavlo
41

Oto ostatni artykuł na temat sztuczek css, który omawia ten temat.

Niektóre rozwiązania w powyższym artykule (które nie są tutaj wymienione) są

1) -webkit-line-clampi 2) Umieść element absolutnie pozycjonowany w prawym dolnym rogu z wygaszeniem

Obie metody zakładają następujące znaczniki:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

z css

.module {
  width: 250px;
  overflow: hidden;
}

1) -webkit-line-clamp

zacisk liniowy FIDDLE (dla maksymalnie 3 linii)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) znikną

Powiedzmy, że ustawiłeś wysokość linii na 1,2em. Jeśli chcemy odsłonić trzy linie tekstu, możemy po prostu ustawić wysokość kontenera 3.6em (1.2em × 3). Ukryty przepełnienie ukryje resztę.

Zanik FIDDLE

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Rozwiązanie nr 3 - Kombinacja korzystająca z @supports

Możemy użyć @supports, aby zastosować zacisk linii webkit w przeglądarkach webkit i zastosować wygaszanie w innych przeglądarkach.

@ obsługuje zacisk liniowy z fadedle fadedle

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}
Danield
źródło
@ HP's411 W Firefoksie zobaczysz efekt zanikania zamiast elipsy
Danield
34

Poniższy link zawiera czyste rozwiązanie HTML / CSS tego problemu.

Obsługa przeglądarki - jak stwierdzono w artykule:

Do tej pory testowaliśmy na Safari 5.0, IE 9 (musi być w trybie standardów), Opera 12 i Firefox 15.

Starsze przeglądarki będą nadal działać całkiem dobrze, ponieważ mięso układu ma normalne właściwości pozycjonowania, marginesów i wypełnienia. jeśli twoja platforma jest starsza (np. Firefox 3.6, IE 8), możesz użyć tej metody, ale powtórz gradient jako samodzielny obraz PNG lub filtr DirectX.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

css:

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

HTML:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

skrzypce

(zmień rozmiar okna przeglądarki do testowania)

Kevin
źródło
2
„Do tej pory testowaliśmy ...” wszystko oprócz Chrome?
stevenspiel,
Test przeszedłChrome for Mac Version 48.0.2564.116
Adrien Be
21

Po przejrzeniu specyfikacji W3 dotyczącej przepełnienia tekstu , nie sądzę, że jest to możliwe tylko przy użyciu CSS. Ellipsis jest nową właściwością, więc prawdopodobnie nie otrzymała jeszcze dużego użycia ani opinii.

Wydaje się jednak, że ten facet zadał podobne (lub identyczne) pytanie i ktoś był w stanie wymyślić fajne rozwiązanie jQuery. Możesz przetestować rozwiązanie tutaj: http://jsfiddle.net/MPkSF/

Jeśli javascript nie jest opcją, myślę, że możesz mieć pecha ...

Jeff
źródło
3
Nowy? MSIE wspierało to od IE6. Obecnie wszystkie przeglądarki obsługują tę funkcję, z wyjątkiem Firefox .
Christian
Nazwałbym każdą właściwość CSS3, która nie jest globalnie zaimplementowana, nową nazwą. To tylko kwestia semantyki. Czy zdajesz sobie sprawę, że komentujesz post, który ma prawie rok?
Jeff
5
To nie jest CSS3, jest tam od wieków i jest powszechnie adoptowany. Tylko specyfikację można uznać za nową. Ponadto, gdyby SO nie chciał komentować starych wątków, mogliby to wyłączyć.
Christian
10

Po prostu chcę dodać do tego pytania ze względu na kompletność.

Matt
źródło
Wygląda na to, że -o-ellipsis-lastlinemogło zostać usunięte, gdy Opera przełączyła się na WebKit. Pozostawienie kuli do celów historycznych.
Matt
8

Świetne pytanie ... Chciałbym, żeby była odpowiedź, ale jest to obecnie najbliższe rozwiązanie CSS. Brak elipsy, ale nadal całkiem użyteczna.

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height
Adam Fraser
źródło
w rzeczywistości odpowiedź Kevina jest najbliższa, jaką można obecnie uzyskać dzięki CSS stackoverflow.com/a/14248844/759452
Adrien Be
7

Znalazłem to rozwiązanie css (scss), które działa całkiem dobrze. W przeglądarkach webkit pokazuje elipsę, a w innych przeglądarkach po prostu obcina tekst. Co jest w porządku dla mojego zamierzonego zastosowania.

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Przykład twórcy: http://codepen.io/martinwolf/pen/qlFdp

Nikola Lajic
źródło
-webkit-line-clampobsługa przeglądarki caniuse.com/#search=-webkit-line-clamp
Adrien Be
6

Oto najbliższe rozwiązanie, jakie można uzyskać za pomocą tylko css.

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Working Fiddle ( zmień rozmiar okna, aby sprawdzić )

Link do mojego bloga w celu wyjaśnienia

Zaktualizowano skrzypce

Mam nadzieję, że teraz jakiś ekspert css wiedziałby, jak to zrobić. :)

Pan Zielony
źródło
Ta odpowiedź wywołuje u mnie ból brzucha. Przede wszystkim nie używasz typograficznie dostępnej wielokropka… (jest to symbol czcionki zajmujący jedną spację). Porównaj smashingmagazine.com/2008/08/11/top-ten-web-typography-sins Za pomocą swojego rozwiązania nie możesz tak naprawdę kontrolować, gdzie znajduje się elipsa, więc może dojść do niepożądanych sytuacji, takich jak kropki z rzędu .
Volker E.
1
@VolkerE. Dzięki za informację. Oto zaktualizowane skrzypce . daj mi znać, jeśli brakuje mi jakiegokolwiek wyjaśnienia.
Mr_Green
Świetne rozwiązanie (oryginalne), ale dlaczego nie użyć div::beforezamiast tego span? :)
Adam,
@Adam był pewien przypadek krawędzi, więc nie użyłem pseudo elementu. ( Teraz tego nie pamiętam )
Mr_Green,
5

Tutaj jest wiele odpowiedzi, ale potrzebowałem takiej, która była:

  • Tylko CSS
  • Przyszłościowy (staje się bardziej zgodny z czasem)
  • Nie będę rozdzielał słów (tylko na spacje)

Zastrzeżenie polega na tym, że nie zapewnia wielokropka dla przeglądarek, które nie obsługują -webkit-line-clampreguły (obecnie IE, Edge, Firefox), ale używa gradientu, aby wyciszyć tekst.

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}
<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Możesz zobaczyć to w działaniu w tym CodePen, a także tutaj możesz zobaczyć wersję Javascript (bez jQuery).

NilsyNils
źródło
4

Trochę za późno na tę imprezę, ale wymyśliłem, jak sądzę, wyjątkowe rozwiązanie. Zamiast próbować wstawić własną elipsę za pomocą sztuczek css lub js, pomyślałem, że spróbuję rzucić z ograniczeniem tylko jednej linii. Powielam więc tekst dla każdej „linii” i po prostu używam ujemnego wcięcia tekstu, aby upewnić się, że jeden wiersz zaczyna się tam, gdzie kończy się ostatni. SKRZYPCE

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

Więcej szczegółów w skrzypcach. Wystąpił problem z przepełnieniem przeglądarki, dla którego używam przerysowania JS i dlatego sprawdź to, ale jest to podstawowa koncepcja. Wszelkie uwagi / sugestie są bardzo mile widziane.

lupos
źródło
1
Nie podoba mi się myśl o powielaniu każdej linii tekstu. Co więcej - co jeśli tekst jest dynamiczny - nie będziesz wiedział, ile wierszy dodać. Biorąc to pod uwagę, +1 za to unikalne rozwiązanie!
Danield
Dzięki za wpis :) Dynamiczny tekst nie stanowi problemu. Zasadniczo określa zamiast tego maksymalną wysokość pojemnika na szablonie. Jeśli chcesz ograniczyć go do 3 linii, zrób 3. Mój przypadek użycia ma nagłówek, który może mieć 1-2 linie i fragment, który może mieć 1-3. To znane wartości. Nie ma znaczenia, jak długa jest struna. Również jeśli robisz to w sytuacji szablonu, a nie w statycznym HTML-ie, możesz obsłużyć ujemne wcięcie w tekście w stylu wbudowanym, więc nie potrzebujesz dużego bloku linii 1, linii 2, linii 3 itd. skrzypce na przykładzie szablonu js.
lupos
Byłoby pomocne, jeśli łamanie słów nie jest problemem w projekcie.
Mr_Green
3

dzięki @balpha i @Kevin, łączę dwie metody razem.

w tej metodzie nie są potrzebne js.

możesz użyć background-imagei nie potrzebujesz gradientu, aby ukryć kropki.

innerHTMLz .ellipsis-placeholdernie jest to konieczne, mogę używać .ellipsis-placeholder, aby zachować tę samą szerokość i wysokość z .ellipsis-more. Możesz display: inline-blockzamiast tego użyć .

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}
<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

Defims
źródło
2

rozwiązanie javascript będzie lepsze

  • pobierz numer wiersza tekstu
  • przełącz is-ellipsisklasę, jeśli zmieni się rozmiar okna lub zmieni się element

getRowRects

Element.getClientRects()działa w ten sposób

wprowadź opis zdjęcia tutaj

każdy rects w tym samym rzędzie ma taką samą topwartość, więc dowiedzieć się, prostokąty, o różnej topwartości, jak to

wprowadź opis zdjęcia tutaj

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

pływak ...more

jak to

wprowadź opis zdjęcia tutaj

wykryć zmianę rozmiaru okna lub zmianę elementu

jak to

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

Defims
źródło
0

czysta metoda css oparta na -webkit-line-clamp:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}
<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Defims
źródło
-1

Znalazłem sztuczkę javascript, ale musisz użyć długości ciągu. Powiedzmy, że chcesz 3 linie o szerokości 250 pikseli, możesz obliczyć długość na linię, tj

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}
Tremmillicious
źródło
Najprawdopodobniej nie używamy wszędzie czcionek o stałej szerokości. Więc ta sztuczka może się nie powieść w takich sytuacjach.
Ovilia,