Limit amount of bootstrap mode characters

Question

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 news.

But my doubt is that I am working with bootstrap, as I would do it ?

Answer 1

There are a plethora of ways to do this, some just with CSS and others involving Javascript.

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

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

Take 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 specify css property line-clamp because the support of browsers is still very small, nor in Firefox works as you can see here: https://caniuse.com/#feat=css-line-clamp

OBS2: in this article there are a multitude of forms that can suit you some corssbrowser others not so much and some with JS https://css-tricks.com/line-clampin/