Limit number of bootstrap mode characters

Question

Limit number of bootstrap mode characters

Navigation

#1 by (0 votes)

1

I need to add a character limitation. I want the main page to display only a percentage of characters, example 100 and when the user accesses that post, show the full story.

But my question is that I'm working with bootstrap, how would I do it?

twitter-bootstrap bootstrap-3 responsivo

asked by anonymous 23.04.2018 / 22:24

1 answer

Certificate does not load in IIS 8.5 Upload another html doc instead of the current one using pure Javascript

score 0 · Answer 1

There are a multitude of ways to do this, some with only CSS and some involving JavaScript.

I'll give you a solution with CSS. In this technique imagine that the "..." are always there, but there is an element above them that when it is hit by the text it jumps to the bottom line and leaves the "..." visible. All of this is possible using ::before and ::after and overflow:hidden in container The legal of this technique is that if the text is less than 100 characters the "..."

In this example the text is set to the default values of the browser, I just set the width of the div to exactly 100 characters.

See the example:

div {
    width: 230px;
    height: 100px;
    border: 1px solid #666;
    text-align: justify;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em; 
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

<p>MAIS de 100 characters</p>
<div class="block-with-text ">
    Lorem, ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Wsit amet, até aqui tem 100! Resto do rexto que não aparece!
</div>
<br>
<p>MENOS de 100 characters</p>
<div class="block-with-text ">
    Lorem, ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Menos de 100
</div>
<br>
<p>Mais de 100 characters e <strong>sem overflow no container</strong> para vc ver</p>
<div class="block-with-text " style="overflow: visible">
    Lorem, ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Wsit amet, até aqui tem 100! Resto do texto que não aparece pelo overflow!
</div>

Reference Source

OBS1: I do not indicate the css line-clamp property because browser support is still very small, nor does FireFox work as you can see here: link

OBS2: In this article there are a myriad of ways that can be met by some other corssbrowser not so much and some with JS link