Wielokropek przepełnienia tekstu w dwóch wierszach

Wiem, że możesz użyć kombinacji reguł CSS, aby tekst kończył się wielokropkiem (...), gdy nadejdzie czas przepełnienia (wyjścia poza granice rodzica).

Czy można (śmiało powiedzieć: nie) osiągnąć ten sam efekt, ale tekst zawija się w więcej niż jednym wierszu?

Oto demo .

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

Jak widać, tekst kończy się wielokropkiem, gdy jest szerszy niż szerokość elementu div. Jednak nadal jest wystarczająco dużo miejsca, aby tekst zawinął się w drugą linię i kontynuował. Jest to przerywane przez white-space: nowrap, które jest wymagane do działania elipsy.

Jakieś pomysły?

PS: brak rozwiązań JS, czysty CSS, jeśli to możliwe.

Nie jestem pewien, czy widzieliście TO , ale świetny CSS-Tricks.com Chrisa Coyiera zamieścił link do tego jakiś czas temu i jest to czyste rozwiązanie CSS, które spełnia dokładnie to, czego szukasz.

(Kliknij, aby wyświetlić na CodePen)

HTML:

<div class="ellipsis">
    <div>
        <p>
            Call me Ishmael. Some years ago – never mind how long precisely – 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 – then, I account
            it high time to get to sea as soon as I can.
        </p>
    </div>
</div>

CSS:

html,body,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-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
    �background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
    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);
    }

Oczywiście bycie czystym rozwiązaniem CSS oznacza, że ​​jest również dość skomplikowane, ale działa czysto i elegancko. Zakładam, że Javascript nie wchodzi w rachubę, ponieważ jest to znacznie łatwiejsze do osiągnięcia (i prawdopodobnie bardziej degradowalne) z Javascriptem.

Jako dodatkowy bonus, dostępny jest plik zip do pobrania z całego procesu (jeśli chcesz to zrozumieć i wszystko), ale także plik mieszany SASS, dzięki czemu możesz go łatwo złożyć w swoim procesie.

Mam nadzieję że to pomoże!

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

Proste właściwości CSS mogą załatwić sprawę. Poniżej przedstawiono trójwierszowy wielokropek.

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

Spójrz na tę czystą wersję css: http://codepen.io/martinwolf/pen/qlFdp

display: -webkit-box;
max-width: 400px;
height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;

CSS poniżej powinien załatwić sprawę.

Po drugiej linii tekst będzie zawierał ...

line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

Użyj tego, jeśli powyższe nie działa

 display: block;
 display: -webkit-box;
 max-width: 100%;
 margin: 0 auto;
 -webkit-line-clamp: 2;
 /* autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */
 overflow: hidden;
 text-overflow: ellipsis;

Moje rozwiązanie ponownie wykorzystuje rozwiązanie amcdnl, ale moje rozwiązanie zastępcze polega na użyciu wysokości dla kontenera tekstu:

.my-caption h4 {
    display: -webkit-box;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    height: 40px;/* Fallback for non-webkit */
}

Bazując na odpowiedzi, którą zobaczyłem w stackoveflow, stworzyłem ten MNIEJSZY mixin ( użyj tego linku do wygenerowania kodu CSS ):

.max-lines(@lines: 3; @line-height: 1.2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  line-height: @line-height;
  max-height: @line-height * @lines;
}

Stosowanie

.example-1 {
    .max-lines();
}

.example-2 {
    .max-lines(3);
}

.example-3 {
    .max-lines(3, 1.5);
}

Bardziej eleganckie wydaje się połączenie dwóch klas. Możesz opuścić two-lineszajęcia, jeśli tylko jeden wiersz wymaga:

.ellipse {
          white-space: nowrap;
          display:inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
       }
      .two-lines {
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
      }
      .width{
          width:100px;
          border:1px solid hotpink;
      }

        <span class='width ellipse'>
          some texts some texts some texts some texts some texts some texts some texts
       </span>

       <span class='width ellipse two-lines'>
          some texts some texts some texts some texts some texts some texts some texts
       </span>

Ograniczenie do kilku linii będzie działać w prawie wszystkich przeglądarkach, ale wielokropek (3 kropki) nie będzie wyświetlany w przeglądarce Firefox i IE. Demo - http://jsfiddle.net/ahzo4b91/1/

div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden; 
}

          text-overflow: ellipsis;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          line-height: 36px;
          max-height: 18px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

Znalazłem kombinację zarówno zacisku liniowego, jak i wysokości linii: D

W mojej aplikacji kątowej następujący styl zadziałał, aby uzyskać wielokropek na przepełnieniu tekstu w drugiej linii :

 <div style="height:45px; overflow: hidden; position: relative;">
     <span class=" block h6 font-semibold clear" style="overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; 
        line-height: 20px; /* fallback */
        max-height: 40px; /* fallback */
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;">
        {{ event?.name}} </span>
 </div>

Mam nadzieję, że to komuś pomoże.

Osoby pracujące w scss muszą dodać !autoprefixerna początku komentarza, aby został zachowany dla postów:

Spotkałem się z tym problemem, dlatego zamieszczam go tutaj

line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

Odniesienie

Możesz użyć efektu rozpuszczenia zamiast wielokropka, czystego CSS i wygląda bardziej profesjonalnie:

    <div style="width: 293px; height:48px; overflow: hidden; ">
        More than two line of text goes here-More than two line of text goes here
    </div>
    <div style="position: relative; top: -24px; width: 293px; height:24px; 
             background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
    </div>

Tutaj założyłem, że twój kolor tła jest biały.

To totalny hack, ale działa:

http://jsfiddle.net/2wPNg/

div {
    width: 30%;
    float: left;
    margin-right: 2%;
    height: 94px;
    overflow: hidden;
    position: relative;
}

div:after {
     display: block;
      content: '...';
      width: 1em;
  height: 1.5em;
  background: #fff;
  position: absolute;
  bottom: -6px;
  right: 0;
    }

Ma problemy ... może niezręcznie uciąć list i prawdopodobnie będzie miał dziwne wyniki w responsywnej witrynie.

Oto prosty skrypt do zarządzania wielokropkiem za pomocą jQuery. Sprawdza rzeczywistą wysokość elementu i tworzy ukryty oryginalny węzeł oraz węzeł obcięty. Kiedy użytkownik kliknie, przełącza się między dwiema wersjami.

Jedną z wielkich zalet jest to, że „wielokropek” znajduje się blisko ostatniego słowa, zgodnie z oczekiwaniami.

Jeśli używasz czystych rozwiązań CSS, trzy kropki pojawiają się jako odległe od ostatniego słowa.

function manageShortMessages() {

        $('.myLongVerticalText').each(function () {
            if ($(this)[0].scrollHeight > $(this)[0].clientHeight)
                $(this).addClass('ellipsis short');
        });

        $('.myLongVerticalText.ellipsis').each(function () {
            var original = $(this).clone().addClass('original notruncation').removeClass('short').hide();
            $(this).after(original);

            //debugger;
            var shortText = '';
            shortText = $(this).html().trim().substring(0, 60) + '...';
            $(this).html(shortText);
        });
        
        $('.myLongVerticalText.ellipsis').click(function () {
            $(this).hide();

            if ($(this).hasClass('original'))
            {
                $(this).parent().find('.short').show();
            }
            else
            {
                $(this).parent().find('.original').show();
            }
        });
    }
	
  manageShortMessages();

div {
 border:1px solid red;
 margin:10px;
}

div.myLongVerticalText {
  height:30px;
  width:450px;
}

div.myLongVerticalText.ellipsis {
 cursor:pointer;
}

div.myLongVerticalText.original {
  display:inline-block;
  height:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="myLongVerticalText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada.

Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt.
</div>


<div class="myLongVerticalText">
One Line Lorem ipsum dolor sit amet.  
</div>
</body>

Nie wiesz, jaki jest twój cel, ale czy chcesz, aby tekst znalazł się w drugiej linii?

Oto twój jsFiddle: http://jsfiddle.net/8kvWX/4/ właśnie usunął następujące:

     white-space:nowrap;  

Nie jestem pewien, czy tego właśnie szukasz, czy nie.

Pozdrowienia,

Mee