[html] Text overflow ellipsis on two lines

I know you can use a combination of CSS rules to make text end with ellipsis (...) when it's time to overflow (get out of parent's bounds).

Is it possible (feel free to just say, no) to achieve the same effect, but let the text wrap on more than one line?

Here's a demo.

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

As you can see, the text ends with ellipsis when it goes wider than the div's width. However, there is still enough space for the text to wrap on a second line and go on. This is interrupted by white-space: nowrap, which is required for the ellipsis to work.

Any ideas?

P.S.: No JS solutions, pure CSS if possible.

Use this if above is not working

 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;

          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;

I've found a combo of both line-clamp and line-height works :D

Restricting to few lines will work in almost all browsers, but an ellipsis(3 dots) will not be displayed in Firefox & 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; 
}

Base on an answer I saw in stackoveflow, I created this LESS mixin (use this link to generate the CSS code):

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

Usage

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

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

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

For those working in scss, you need to add !autoprefixer to the start of the comment so that it is preserved for postcss:

I faced that issue that's why posting it here

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

Reference

Take a look at this pure css version: 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;

Not sure what your target is, but do you want the text to come on the second line?

Here is your jsFiddle: http://jsfiddle.net/8kvWX/4/ just removed the following:

     white-space:nowrap;  

Im not sure if this is what your are looking for or not.

Regards,

Mee

It seems more elegant combining two classes. You can drop two-lines class if only one row need see:

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

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

Here is a simple script to manage the ellipsis using jQuery. It inspects the real height of the element and it creates a hidden original node and a truncated node. When the user clicks it switches between the two versions.

One of the great benefits is that the "ellipsis" is near the last word, as expected.

If you use pure CSS solutions the three dots appears distant from the last word.

function manageShortMessages() {_x000D_
_x000D_
        $('.myLongVerticalText').each(function () {_x000D_
            if ($(this)[0].scrollHeight > $(this)[0].clientHeight)_x000D_
                $(this).addClass('ellipsis short');_x000D_
        });_x000D_
_x000D_
        $('.myLongVerticalText.ellipsis').each(function () {_x000D_
            var original = $(this).clone().addClass('original notruncation').removeClass('short').hide();_x000D_
            $(this).after(original);_x000D_
_x000D_
            //debugger;_x000D_
            var shortText = '';_x000D_
            shortText = $(this).html().trim().substring(0, 60) + '...';_x000D_
            $(this).html(shortText);_x000D_
        });_x000D_
        _x000D_
        $('.myLongVerticalText.ellipsis').click(function () {_x000D_
            $(this).hide();_x000D_
_x000D_
            if ($(this).hasClass('original'))_x000D_
            {_x000D_
                $(this).parent().find('.short').show();_x000D_
            }_x000D_
            else_x000D_
            {_x000D_
                $(this).parent().find('.original').show();_x000D_
            }_x000D_
        });_x000D_
    }_x000D_
 _x000D_
  manageShortMessages();

div {_x000D_
 border:1px solid red;_x000D_
 margin:10px;_x000D_
}_x000D_
_x000D_
div.myLongVerticalText {_x000D_
  height:30px;_x000D_
  width:450px;_x000D_
}_x000D_
_x000D_
div.myLongVerticalText.ellipsis {_x000D_
 cursor:pointer;_x000D_
}_x000D_
_x000D_
div.myLongVerticalText.original {_x000D_
  display:inline-block;_x000D_
  height:inherit;_x000D_
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<body>_x000D_
<div class="myLongVerticalText">_x000D_
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._x000D_
_x000D_
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._x000D_
</div>_x000D_
_x000D_
_x000D_
<div class="myLongVerticalText">_x000D_
One Line Lorem ipsum dolor sit amet.  _x000D_
</div>_x000D_
</body>

In my angular app the following style worked for me to achieve ellipsis on the overflow of text on the second line:

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

Hope it helps someone.

You can use a dissolved out effect instead of ellipsis, pure CSS and looks more professional:

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

Here I have assumed your background color is white.

Easy CSS properties can do the trick. The following is for a three-line ellipsis.

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

Css below should do the trick.

After the second line the, text will contain ...

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

This is a total hack, but it works:

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

It does have problems.... it might cut off a letter awkwardly, and it will probably have some weird results on a responsive site.

My solution reuses the one of amcdnl, but my fallback consist of using a height for the text container:

.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 */
}