Use "text-overflow" with "height"

Question

Suppose I had a div, I applied to that div text-overflow, for her respects the width of the div and add the reticencias(...), but until then, she only respects the width, and I wanted this element of css to respect the width and the height, that is, he of this line break to reach the limit of the height, and when you reach the end of the last line, with the limit of height, he applied the reticence, someone knows how to do?

Css code:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
width:100%;
height: 35px;
color:#FF8000;

Answer 1

Late but functional response. The CSS below applied in the div (or paragraph) where the text is, limits the display in number of lines, and not in height (height).

display: -webkit-box;
-webkit-line-clamp: 3; /** número de linhas que você quer exibir */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

Credits: https://stackoverflow.com/a/34559614/13185945

Answer 2

It is possible to add ellipsis to a block element when the text has only one line. Otherwise, only with a little programming, as shown in another answer.

To set this property in CSS, the basic code is this:

.reticencias{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Answer 3

There is no way to display only part of the text and still add ellipsis at the end with the properties CSS. You would need to use native commands of the language you are using (PHP, ASP, etc...), but they would only cut the text, without adding the ellipsis.

To do what you want, correctly, you need to create the function:

<?php
function tamanho_texto($str, $length) {
     return substr($str, 0, $length)."...";
}
?>

And then, when writing the text, define how many characters you want it to have, according to the size of your div.

<?php
echo tamanho_texto("TESTE DE TEXTO", 8);
?>

And your return would be: TESTE DE...