How to use Ellipsis css3?

Asked

Viewed 6,724 times

4

I’m trying and I’m doing the same explains at w3schools but it’s not working.

.box {
    width: 250px; 
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Maecenas fermentum   nisi ut auctor posuere. Fusce pulvinar blandit commodo.
 Nulla nunc nunc, ultrices vitae aliquam sit amet, aliquam a metus. Aenean 
semper nisi sed augue elementum tincidunt. Maecenas sit amet magna id lectus
tempor luctus in quis justo. Proin vel iaculis.
</div>

css css3
  • 2

    I was behind this a long time ago and found this example, if you want to take a look http://codepen.io/chriscoyier/pen/iBtep

  • 1

    Thanks, very good this example and functional, but p/ my case I can only make change in css I believe that the @Ack Lay example will suit me better but your solution can help other users, congratulations

3 answers

5


Beyond the text-overflow: ellipsis, you must still use the property white-space, that defines how the white space inside an element is manipulated. Also the property overflow as Hidden, which specifies when the contents of a block level element should be cut. Here’s what your code should look like:

.box { 
max-width: 250px;
font-size: 20dp;
white-space: nowrap;                  
overflow: hidden; /* "overflow" value must be different from "visible" */
text-overflow:    ellipsis;
border: 1px solid #ccc;

}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Maecenas fermentum   nisi ut auctor posuere. Fusce pulvinar blandit commodo.
 Nulla nunc nunc, ultrices vitae aliquam sit amet, aliquam a metus. Aenean 
semper nisi sed augue elementum tincidunt. Maecenas sit amet magna id lectus
tempor luctus in quis justo. Proin vel iaculis.
</div>

It is also possible to do multilines using the webkit. See below an example with 3 lines:

.box { 
  display: block; 
  display: -webkit-box;
  max-width: 250px;
  font-size: 20dp;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc;
}
<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Maecenas fermentum   nisi ut auctor posuere. Fusce pulvinar blandit commodo.
     Nulla nunc nunc, ultrices vitae aliquam sit amet, aliquam a metus. Aenean 
    semper nisi sed augue elementum tincidunt. Maecenas sit amet magna id lectus
    tempor luctus in quis justo. Proin vel iaculis.
</div>

4

To break in the first row you need to add the following properties as well:

{
  white-space: nowrap;
  overflow: hidden;
}

Otherwise your text will break down to the bottom line and continue endlessly.

  • OK right... but I can’t use the 3 points in the third line of the text... ?

  • Then give first line only with javascript. This feature only works at first

3

Following the example you mentioned, we were missing 2 rules :

.box {
        width: 250px;
        white-space: nowrap; 
        text-overflow: ellipsis;
        overflow: hidden; 
        border: 1px solid #000000;
    }

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.