elipsa css w drugiej linii

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

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.

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

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

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 .

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;

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.

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

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/

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 .

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>

Wcześniej używałem wtyczki jQuery-condense , która wygląda na to, że może robić, co chcesz. Jeśli nie, istnieją różne wtyczki, które mogą odpowiadać Twoim potrzebom.

Edycja: Zrobiłem ci wersję demo - zwróć uwagę, że połączyłem plik jquery.condense.js z wersją demonstracyjną, która robi magię, więc pełne uznanie dla autora tej wtyczki :)

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.

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

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.

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)

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>

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>

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

$clamp(myHeader, {clamp: 3});

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/