elipsa css w drugiej linii

208

CSS text-overflow: ellipsisna drugiej linii, czy to możliwe? Nie mogę tego znaleźć w sieci.

przykład:

chcę to tak:

I hope someone could help me. I need 
an ellipsis on the second line of...

ale dzieje się tak:

I hope someone could help me. I ... 
Reigel
źródło
3
AFAIK pojawi się elipsa i odetnie tekst na końcu szerokości elementu. Nie przejdzie do następnej linii. Najlepszym rozwiązaniem byłoby zaimplementowanie skryptu po stronie serwera lub klienta, który automatycznie przycina tekst do określonej liczby znaków, a następnie dodaje wielokropek. Domyślam się, że skrypt po stronie klienta byłby lepszy, co pozwoliłoby ci zachować cały oryginalny tekst, jeśli go potrzebujesz.
FarligOpptreden
oto podobne pytanie: stackoverflow.com/questions/3922739/…
Evgeny
tl; dr: jest to możliwe tylko w zestawie internetowym
Evgeny
Najbliżej tego doszedłem, dodając pseudoelement „za” do elipsy i umieszczając go wewnątrz, bezpośrednio za elementem zawierającym tekst. Elipsa znika jednak, jeśli tekst elementu jest zbyt długi, więc trzeba by go jakoś przyciąć, aby był niezawodny.
Jonathan

Odpowiedzi:

105

Wymogiem text-overflow: ellipsis;do pracy jest wersja jednej linii white-space( pre, nowrapetc). Co oznacza, że ​​tekst nigdy nie osiągnie drugiej linii.

Ergo. Niemożliwe w czystym CSS.

Moje źródło, kiedy szukałem dokładnie tego samego teraz: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDYCJA Jeśli dobrzy bogowie CSS wdrożą http://www.w3.org/TR/css-overflow-3/#max-lines , możemy zaryzykować w czystym CSS, używając fragments(nowych) i max-lines(nowych). Również więcej informacji na http://css-tricks.com/line-clampin/

EDYCJA 2 WebKit / Blink ma line-clamp: -webkit-line-clamp: 2umieści wielokropek w 2. linii.

Rudie
źródło
9
Pilnowanie, ale jak dotąd wydaje się, że bogów jeszcze nie ma z nami: caniuse.com/#search=max-lines
Daniel
1
Jak osiągnąć powyższą funkcję dzięki saas? @Rudie
Bhoomi Bhalani,
144

Powinno to działać w przeglądarkach webkit :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
Skeep
źródło
1
Zauważ, że od tego komentarza -webkit-line-clamp nie respektuje widoczności: ukryty. bugs.webkit.org/show_bug.cgi?id=45399
Kevin
1
Hej - wygląda miło, ale nie działa dla mnie. Po prostu umieszcza „...” na danym zacisku linii, ale nie tnie reszty tekstu (nawet z
attrami białych znaków
3
Aby overflow: hiddento zadziałało, konieczne może być dodanie .
Robert
To nie zadziała w Firefoksie, webkit nie jest obsługiwany w silniku gecko
ZetaPR 15.09.16
To powinna być zaakceptowana odpowiedź. Nie chcesz też żadnej dopełnienia u dołu elementu, do którego to zastosujesz, ponieważ możesz przejrzeć resztę tekstu.
Tr1stan
34

Jak już inni odpowiedzieli, czyste rozwiązanie CSS nie istnieje. Istnieje bardzo łatwa w użyciu wtyczka jQuery , która nazywa się dotdotdot . Wykorzystuje szerokość i wysokość pojemnika, aby obliczyć, czy należy go obciąć i dodać elipsę.

$("#multilinedElement").dotdotdot();

Oto jsFiddle .

Giohji
źródło
Ta wtyczka zapewnia również wiele innych narzędzi, takich jak dodawanie łączy „czytaj więcej”, może także analizować identyfikatory URI i znaczniki HTML. Dobre znalezisko!
Martin Andersson,
2
Wypróbowałem jQuery dotdotdot 1.7.3 dla sklepu e-commerce, aby ograniczyć nazwy produktów na stronie kategorii siatki do dwóch wierszy. Po dokładnych testach postanowiliśmy nie korzystać z tej wtyczki, ponieważ czasami po odświeżeniu shift zmienił się układ strony kategorii. YMMV. Na koniec wybraliśmy bardzo proste waniliowe rozwiązanie JS: jeśli element clientHeight elementu nazwy produktu jest mniejszy niż scrollHeight, obetnij tekst na ustalonej granicy i dodaj „...”. Czasami kilka nazw produktów może być nieco za krótkich z powodu ustawionej granicy, ale jest bardzo stabilna.
thdoan
1
Easty do wdrożenia i działa pięknie. Dziękuję Ci!
Rachel S
Chociaż działa dobrze, niestety ma problemy z wydajnością. Jeśli Twój projekt wymaga wielokrotnego użycia elipsy, rozważ inną opcję. Oprócz tego cytat z repozytorium: „Ponieważ jego wydajności nie można poprawić, ta wtyczka nie jest już aktywnie utrzymywana”.
boyomarinov,
1
również nie działałoby, jeśli tekst zmienia się dynamicznie po załadowaniu :(
Dejell
34

Przekonałem się, że odpowiedź Skeepa była niewystarczająca i również potrzebowała overflowstylu:

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
Simon H.
źródło
18

jeśli ktoś używa SASS / SCSS i natknie się na to pytanie - być może ten mixin może pomóc:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

dodaje to tylko elipsę w przeglądarkach webkit. reszta po prostu odcina to.

dziobak
źródło
1
Korzystając z opcji LESS, musiałem się zmienić, /* autoprefixer: off */aby /*! autoprefixer: off */inaczej -webkit-box-orient: vertical;został usunięty po kompilacji, co oznacza, że ​​elipsa nigdy się nie pokazała
Nathan
18

Wystarczy użyć zacisku linii dla przeglądarek, które go obsługują (większość współczesnych przeglądarek) i wrócić do 1 linii dla starszych.

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


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
Mikołaj
źródło
1
biała spacja: początkowa; uratował mnie
James
10

Szkoda, że ​​nie da się tego zrobić w dwóch liniach! Byłoby wspaniale, gdyby element był blokiem wyświetlania i miał wysokość ustawioną na 2em lub coś, a gdy tekst się przepełni, pokaże elipsę!

W przypadku pojedynczej wkładki możesz użyć:

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

W przypadku wielu linii możesz użyć funkcji Polyfill, takiej jak jQuery autoellipsis, która znajduje się na github http://pvdspek.github.com/jquery.autoellipsis/

superlogiczny
źródło
Ta wtyczka jest o wiele za ciężka na to, co robi. Ma 5 lat. Raczej wykorzystanie dotdotdotwspomniane w innym poście.
adi518
10

Nie jestem zawodowcem JS, ale wymyśliłem kilka sposobów, w jakie możesz to zrobić.

HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

Następnie za pomocą jQuery przycinasz go do określonej liczby znaków, ale zostawiasz ostatnie słowo w ten sposób:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

Wynik wygląda następująco:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementumsequat tortor et…

Możesz też po prostu przyciąć go do określonej liczby znaków, takich jak to:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

Wynik wygląda następująco:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementumsequat tortor et euismod…

Mam nadzieję, że to trochę pomoże.

Oto jsFiddle .

Ross Howard-Jones
źródło
7

tutaj jest dobry przykład w czystym css.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}
<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Mirodil
źródło
Całkiem dobre rozwiązanie, po prostu obcina teksty, nawet jeśli druga linia jest zbyt krótka, aby ją obciąć, ale nadal kciuki w górę
Amin
4

Jest to niestandardowy CSS, który nie jest objęty obecną wersją CSS (Firefox go nie obsługuje). Zamiast tego spróbuj użyć JavaScript.

Raptor
źródło
4

Czysty css sposób przycinania tekstu wielowierszowego z wielokropkiem

Dostosuj wysokość kontenera tekstu, linię kontrolną, aby przełamać przez -webkit-line-clamp: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
Indygowiec
źródło
3

Zetknąłem się z tym problemem już wcześniej i nie ma czystego rozwiązania css

Właśnie dlatego opracowałem małą bibliotekę, aby poradzić sobie z tym problemem (między innymi). Biblioteka udostępnia obiekty do modelowania i wykonywania renderowania tekstu na poziomie litery. Możesz na przykład emulować przepełnienie tekstu: elipsa z dowolnym limitem (niekoniecznie jedna linia)

Przeczytaj więcej na http://www.samuelrossille.com/home/jstext.html, aby uzyskać zrzut ekranu, samouczek i łącze pobierania.

Samuel Rossille
źródło
3

Jeśli ktoś próbuje uruchomić zacisk liniowy do pracy w Flexbox , jest to nieco trudniejsze - szczególnie gdy testujesz tortury naprawdę długimi słowami. Jedyne rzeczywiste różnice w tym fragmencie kodu to min-width: 0;element flex zawierający obcięty tekst i word-wrap: break-word;. Porada dla https://css-tricks.com/flexbox-truncated-text/ w celu uzyskania wglądu. Oświadczenie: jest to wciąż webkit, o ile wiem.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}
<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (wersja codepen)

AlexMA
źródło
1

Wszystkie odpowiedzi tutaj są błędne, brakuje im ważnego elementu, wysokości

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>
zły kiwi
źródło
0

czysta metoda css oparta na -webkit-line-clamp, która działa na webkit:

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

Nie ma naprawdę łatwego sposobu na zrobienie tego. Użyj biblioteki Clamp.js .

$clamp(myHeader, {clamp: 3});
S.Galarneau
źródło
-6

Znalazłem rozwiązanie, jednak musisz znać przybliżoną długość znaków, która będzie pasować do twojego obszaru tekstowego, a następnie dołącz ... do poprzedniej spacji.

Sposób, w jaki to zrobiłem, to:

  1. przyjmij przybliżoną długość znaku (w tym przypadku 200) i przekaż do funkcji wraz z tekstem
  2. podziel spacje, aby uzyskać jeden długi ciąg
  3. użyj jQuery, aby wyciąć pierwsze "" spację po długości twojej postaci
  4. dołącz do pozostałych ...

kod :

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

tutaj jest skrzypce - http://jsfiddle.net/GYsW6/1/

Paweł
źródło