truncate paragraph в каждом div

Question

Я новичок в html, и я хочу установить всех символов в каждом абзаце всего 30 символов. Моя идея обрезает его, но я сталкиваюсь с проблемой, как обрезать весь абзац.

Это мой код

<div class="" id="my-gallery-container"> 
     <div class="item h200" data-order="31"> 

      <div class="img-85"> 
       <img src="images/Round David Michael Setyadarma.png"> 

       <p class="parg">1 Qui habitat in protectione Altissimi, sub umbra Omnipotentis commorabitur. 2 Dicet Domino: “ Refugium meum 
        et fortitudo mea, Deus meus, sperabo in eum ”. 
       </P>  
      </div> 
     </div> 

     <div class="item h200" data-order="30"> 
      <div class="img-85"> 
       <img src="images/Round David Michael Setyadarma.png"> 

       <p class="parg">1 Qui habitat in protectione Altissimi, sub umbra Omnipotentis commorabitur. 2 Dicet Domino: “ Refugium meum 
        et fortitudo mea, Deus meus, sperabo in eum ”. 
       </P>  
      </div> 
     </div> 


     <div class="item h200" data-order="29"> 
      <div class="img-85"> 
       <img src="images/Round David Michael Setyadarma.png"> 

       <p class="parg">1 Qui habitat in protectione Altissimi, sub umbra Omnipotentis commorabitur. 2 Dicet Domino: “ Refugium meum 
        et fortitudo mea, Deus meus, sperabo in eum ”. 
       </P>  
      </div> 
     </div> 


     <div class="item h200" data-order="28"> 
      <div class="img-85"> 
       <img src="images/Round David Michael Setyadarma.png"> 

       <p class="parg">1 Qui habitat in protectione Altissimi, sub umbra Omnipotentis commorabitur. 2 Dicet Domino: “ Refugium meum 
        et fortitudo mea, Deus meus, sperabo in eum ”. 
       </P>  
      </div> 
     </div> 

и это мой сценарий под этим кодом

<script type="text/javascript"> 

    function truncateText(selector, maxLength) 
    { 
     var element = document.querySelector(selector), 
      truncated = element.innerText; 

     if (truncated.length > maxLength) 
     { 
      truncated = truncated.substr(0,maxLength) + '...'; 
     } 
     return truncated; 
    }; 

    document.querySelector('p').innerText = truncateText('p', 30); 


</script> 

, но это работает только первый абзац <p> Как укоротить все <p>? кто-нибудь может мне помочь? Спасибо

Я надеюсь, что я не перепечатывать

Answer 1

это то, что вы ищете?

function truncateText(selector, maxLength) { 
    // Get all the paragraphs on page 
    var paras = document.getElementsByTagName(selector); 

    // Loop over paragraphs 
    for (var i = 0; i < paras.length; i++) { 
     // Get the text of each paragraph element 
     var text = paras[i].innerText; 

     // Use javascripts substring to trim it and 
     // set it back as the text of the paragraph element 
     paras[i].innerText = text.substring(0,maxLength) 
    } 
} 

// Input the p tag 
truncateText('p', 30) 

https://jsfiddle.net/t68gue8g/2/
Если это то, что вы хотите, нажмите на зеленую галочку.

Answer 2

Если вы хотите, чтобы текст обрезался на основе макета, вы можете сделать это, используя CSS text-overflow.

Это добавит многоточие после усеченного текста:

.parg { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<p class="parg">1 Qui habitat in protectione Altissimi, sub umbra Omnipotentis commorabitur. 2 Dicet Domino: " Refugium meum et fortitudo mea, Deus meus, sperabo in eum "</p>

Для поддержки браузера вы можете посмотреть here.