Limit text display by number of CSS characters

Question

Friends, usually the overflow: hidden; has a text limit by the size of the DIV from it, say 105 pixels... example:

<div style="overflow: hidden; width:105px; border:1px; white-space:nowrap;">
    teste de texto de teste de texto de teste de texto de teste de texto 
</div>

Then my question: Would it be possible to do this, but with a limit per number of characters? say 5 characters? for example:

<div style="overflow: hidden; width:5em; border:1px; white-space:nowrap;">
    teste de texto de teste de texto de teste de texto de teste de texto  
</div>

But it didn’t work

ps: that question from sequence to topic: I cannot limit text with Japanese characters

Answer 1

A similar result can be obtained using the unit ch, would not be exactly by number of characters, but would be very close. This happens because the measure is made by the amount of 0 defined in Glyph generating the source. Something similar to this f039 (used in Fontawesome) or so U+0030.

'ch' Relative to width of the "0" (zero)

Source

Due to the fact that it is measured by Glyph and not by the character itself, this measure can vary from source to source, that is, it may be that only by changing the source of the project the amount of characters displayed is different.

Here is an example of the code:

p {
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Example: https://jsfiddle.net/6vLprqys/

Note that p has a maximum width of 15ch, which causes the break line after the 15th 0 obtained in the Glyph analysis, the rest of the code only ensures that this line break is not visible and that the 3 points are added at the end of the line. If you don’t want this 3 point display, just remove the property text-overflow, but can have a strange behavior and break in the "middle" of the letter.

With the use of text-overflow, it is possible to break exactly in character, giving a better presentation (at least in the ones I tested).

Now, if you want to break exactly in the 15th font independent character, etc.. Only with CSS will not be possible.

I hope I’ve helped.

Answer 2

Use the text-overflow property

#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

<p>Exemplos abaixo.</p>

<p>Esta div tem a propriedade "text-overflow:clip":</p>
<div id="div1">Este é um texto grande que não caberia na caixa e usando a propriedade</div>

<p>Esta div tem a propriedade "text-overflow:ellipsis":</p>
<div id="div2">Este é um texto grande que não caberia na caixa e usando a propriedade</div>

Or do it using php!!
blog.thiagobelem.net/limiting-texts
You can do this using php, above there is a link showing how it does.