Set width of div containing paragraphe

Question

I have a paragraph with a text inside .descBlog. I defined the width of that paragraph width: 300ch, but I want you to have a div superior with width: 300px. I would like it with the limitation of 300 characters, and with a top div of 300px, it breaks and plays the content 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>

Answer 1

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

.superior{
  width: 300px;
}

Below is an example

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>

Answer 2

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

For such situations you can use Javascript using the method .substring(), where you can take only the number of characters you want and concatenate with "..." where the result is this (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>