Além do text-overflow: ellipsis
, você ainda deve usar a propriedade white-space
, que define como o espaço em branco dentro de um elemento é manipulado. Também a propriedade overflow
como hidden, que especifica quando o conteúdo de um elemento de nível de bloco deve ser cortado. Veja como deve ficar seu código:
.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>
Também é possível fazer multilinhas usando o webkit
. Veja abaixo um exemplo com 3 linhas:
.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>