Limit text display by number of characters with CSS

Question

Limit text display by number of characters with CSS

Navigation

#1 by (5 votes)
#2 by (1 votes)

3

Friends, usually overflow: hidden; has a text limit by the size of DIV of 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>

Soon my question: Would it be possible to do this but with a limit by quantity 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 did not work

ps: this sequence question to the topic: I can not limit text with Japanese characters

html5 css

asked by anonymous 15.03.2016 / 09:34

2 answers

double binding is not working with AngularJs Horizontal ruler with text

score 5 · Answer 1

You can get a similar result using the unit ch , it 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 the glyph that generates the source. Something similar to this f039 (used in FontAwesome) or so U+0030 .

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

Font

Because it is measured by the glyph and not by the character itself, this measure can vary from source to source, that is, it may be that just by changing the font 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: link

Note that p has a maximum width of 15ch , which causes the line to break after the 15% 0 obtained in glyph analysis, the rest of the code only guarantees that this line break is not visible and that the 3 points are added at the end of the line. If you do not want this 3-point display, simply remove the text-overflow property, but it may have strange behavior and break in the middle of the letter.

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

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

I hope I have helped.

score 1 · 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 this using php !!
blog.thiagobelem.net/limiting-texts
You will be able to do this using php, above there is a link showing how you do it.