Set div width containing parchment

Question

Set div width containing parchment

Navigation

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

2

I have a paragraph with a text inside .descBlog . I set the width of this paragraph width: 300ch , however, I want it to have a div greater than width: 300px . I would like that with the limitation of 300 characters, and with an upper div of 300px, it would break and throw the contents of the paragraph down.

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

<div class="superior">    
<p class="descBlog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at vehicula turpis. Donec condimentum sagittis mi sed sollicitudin. In id justo molestie, cursus libero non, auctor ante. Praesent efficitur ac purus ac pellentesque. Pellentesque varius
  nisi quis urna placerat fermentum. Quisque imperdiet est nec nibh tempus viverra. Morbi massa metus, porta eu ex ac, dignissim ultricies felis.</p>
</div>

css

asked by anonymous 01.06.2018 / 00:30

2 answers

1

With CSS in the div determine the width width: 300px; in the div class

.superior{
  width: 300px;
}

Follow the example below

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

.superior{
   width: 300px;
}

<div class="superior"> 
<p class="descBlog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at vehicula turpis. Donec condimentum sagittis mi sed sollicitudin. In id justo molestie, cursus libero non, auctor ante. Praesent efficitur ac purus ac pellentesque. Pellentesque varius
  nisi quis urna placerat fermentum. Quisque imperdiet est nec nibh tempus viverra. Morbi massa metus, porta eu ex ac, dignissim ultricies felis.</p>
</div>

With pure javascript

      var texto = document.getElementById("descBlog").innerText;
      texto = texto.substr(0, 300)+"...";
      document.getElementById("descBlog").innerText=texto

    #superior {
      width: 300px; 
    }

    <div id="superior">
      <p id="descBlog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
        quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at vehicula turpis. Donec condimentum sagittis mi sed sollicitudin. In id justo molestie, cursus libero non, auctor ante. Praesent efficitur ac purus ac pellentesque. Pellentesque varius
      nisi quis urna placerat fermentum. Quisque imperdiet est nec nibh tempus viverra. Morbi massa metus, porta eu ex ac, dignissim ultricies felis.</p>
    </div>

01.06.2018 / 01:48

How to use strings as parameters in R Box with border and a title on top border

score 1 · Accepted Answer

Only CSS is impossible, because text-overflow: ellipsis; requires overflow: hidden; and white-space: nowrap; , which is a problem because it will not work in more than one line of text, it will only work in one line, and the rest text will be ignored.

For such situations you can use JavaScript using the .substring() method, where you can get only the desired number of characters and concatenating with "..." where the result is (explanations in the code):

document.addEventListener("DOMContentLoaded", function(){ // quando o DOM estiver carregado
   var descs = document.querySelectorAll(".descBlog"); // selecione todas as classes
   var text_limit = 300; // limite de caracteres, sem contar "..."
   for(var x=0; x<descs.length; x++){ // percorre todos os elementos da classe
      var desc_txt = descs[x].textContent; // pega o texto
      descs[x].textContent = desc_txt.substring(0, 300)+"..."; // troca o texto por apenas os 300 primeiros caracteres
      descs[x].style.display = "inline"; // exibe o elemento
   }
});

p.descBlog {
   display: none; /* comece com oculto para não aparecer com todo o texto antes do DOM estiver pronto*/
}

.superior{
   width: 300px;
   background: red; /* fundo só para exemplo, pode apagar isso*/
}

<div class="superior">    
   <p class="descBlog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at vehicula turpis. Donec condimentum sagittis mi sed sollicitudin. In id justo molestie, cursus libero non, auctor ante. Praesent efficitur ac purus ac pellentesque. Pellentesque varius nisi quis urna placerat fermentum. Quisque impe est nec nibh tempus viverra. Morbi massa metus, porta eu ex ac, dignissim ultricies felis.</p>
</div>