Use "text-overflow" with "height"

0

Suppose I have a div, I applied it to this div text-overflow , so it respects the width of the div and adds reticence (...), but until then, it only

  • and when he reaches the end of the last line, with the limit of width , he applied the reluctance, does anyone know how to do it?

    css code:

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    width:100%;
    height: 35px;
    color:#FF8000;
    
        
  • asked by anonymous 18.03.2015 / 16:57

    2 answers

    1

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

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

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

    And then, when writing the text, set 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...

        
    19.03.2015 / 18:59
    1

    You can add ellipses 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 to CSS , the basic code is this:

    .reticencias{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    
        
    26.02.2016 / 17:13