I have a tag. The maximum number of lines for output must be 3. Width, let's say 250 px. So, is there any way to cut characters that already increase the level of 3 lines using php or js / jquery? Or a single option, count the number of characters that fit into these 3 lines, and cut off all the rest?

h3{ width:250px; } 
 <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores accusantium aut impedit mollitia repudiandae soluta minima, sit veniam tempora nesciunt magnam laborum, cupiditate eius, animi ex vel incidunt ratione reprehenderit.</h3>

  • one
    What is a string? A string is a certain number of letters before the hyphenation character of the string "\ n". What is a character? a symbol is a graphic representation of something, in this case, a letter. What is the width of the character? And we don’t know there are a lot of fonts, and the characters themselves have different widths ... And how many characters in a given line are there, and we don’t know how wide the client is either. Conclusion: We need to change the concept. Limit the number of words for example. - Naumov
  • @Naumov and the words may be of different lengths ... In general, the task in the concept in which it now has no place to be solved? - Oleksandr
  • one
    @Naumov put a little bit: there are still characters of zero length, combined simols, other line breaks ... - Nick Volynkin ♦
  • It has a solution, but the labor costs for the implementation of such a task are not comparable with real benefits. - Naumov

2 answers 2

html : You just need to know the height of the line. Accordingly, make the height of the element equal to the height of three lines, hiding the remaining content with the overflow property:

 #pops{width:250px;border:1px solid green;height:55px;overflow-y:hidden} #pops:hover{height:auto} 
 <div id="pops"> Изготовители ювелирных украшений – это художники, чья фантазия постоянно ломает рамки, поставленные технологическими ограничениями. Прогресс пришел на помощь ювелирам, экономя временные и финансовые ресурсы, позволяя расширить границы доступного в создании шедевров. Создавать неповторимые изделия быстро и недорого, забыв о слове «невозможно», не приобретая дополнительные материалы и инструменты для изготовления моделей? Сегодня это возможно благодаря технологии 3-D печати, которая произвела настоящую революцию в ювелирном деле. </div>

php Cut the string by the number of characters in a row x3 (with a fixed width of the parent):

 $str = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aspernatur atque dignissimos earum eos esse harum ipsam iste maiores"; <?=substr($str, 0, 96) . " ...";?>
  • I did not specify the question itself. And at the end (visible area) how to make 3 points instead of the last 3 letters? - Oleksandr
  • Do you implement the "read more" block? - Kirill Korushkin
  • No, you just need to cut the text that exceeds 3 lines and put 3 dots at the end instead of 3 last characters. No pops, no nothing. - Oleksandr
  • text blocks output using php or fill manually? - Kirill Korushkin
  • I deduce with the help php - Oleksandr

Javascript:

Insolently in a cycle, we cut word by word and check if we get into the scrollBox.

 function ellipsize(id) { var el = document.getElementById(id); var list = el.innerHTML.split(' '); while(el.scrollHeight > el.offsetHeight) { list.pop(); el.innerHTML = list.join(' ') + '...'; } } ellipsize('text'); 
 #text { line-height: 1.4; height: 4.2em; /*3 line-height*/ width: 400px; /*optional*/ } 
 <h2 id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores accusantium aut impedit mollitia repudiandae soluta minima, sit veniam tempora nesciunt magnam laborum, cupiditate eius, animi ex vel incidunt ratione reprehenderit.</h2>

Pure CSS solution.

Unfortunately, it works only in Webkit .

 h2 { display: block; display: -webkit-box; max-width: 400px; font-size: 26px; line-height: 1.4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 
 <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores accusantium aut impedit mollitia repudiandae soluta minima, sit veniam tempora nesciunt magnam laborum, cupiditate eius, animi ex vel incidunt ratione reprehenderit.</h2>

For one line:

 h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 300px; display: inline-block; } 
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores accusantium aut impedit mollitia repudiandae soluta minima, sit veniam tempora nesciunt magnam laborum, cupiditate eius, animi ex vel incidunt ratione reprehenderit.</h2>