How to use ellipsis css3?

Question

How to use ellipsis css3?

Navigation

#1 by (4 votes)
#2 by (4 votes)
#3 by (3 votes)

4

I'm trying and I'm doing the same explains in 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

asked by anonymous 28.03.2017 / 00:56

3 answers

4

To break the first line you need to add the following properties too:

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

If otherwise, your text will break to the bottom line and continue infinitely.

28.03.2017 / 01:44

3

Following the example you mentioned, two rules were missing:

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

28.03.2017 / 01:44

Get object in array by description in index String with function name in JS

score 4 · Accepted Answer

In addition to text-overflow: ellipsis , you should still use the white-space , which defines how white space within an element is handled. Also the property overflow as hidden , which specifies when the contents of a block level element should be cut. Here's how your code should look:

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

You can also do multilines using webkit . Here is 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>