There is a block with text with a fixed height and width, and the value of overflow: hidden; that is, if the text does not fit into the area it is clipped, you need to add an ellipsis to the end of the last visible line. text-overflow works only for single-line text.

  • one
    Be kind, attach your questions to the question. - Mr. Brightside

5 answers 5

For webkit browsers, you can use this solution.

 div { border: 1px solid #000; padding: 5px; display: block; display: -webkit-box; max-width: 400px; font-size: 20px; -webkit-line-clamp: 4; /* количСство строк */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 
 <div> ΠœΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ (…) β€” Π·Π½Π°ΠΊ прСпинания Π² Π²ΠΈΠ΄Π΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… (Π² русском языкС Ρ‚Ρ€Ρ‘Ρ…) поставлСнных рядом Ρ‚ΠΎΡ‡Π΅ΠΊ. НС ΠΏΡƒΡ‚Π°Ρ‚ΡŒ с Ρ‚Ρ€ΠΎΠ΅Ρ‚ΠΎΡ‡ΠΈΠ΅ΠΌ. Π’Ρ€ΠΎΠ΅Ρ‚ΠΎΡ‡ΠΈΠ΅ (∴) β€” Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π·Π½Π°ΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ словами ΠΈΠ»ΠΈ прСдлоТСниями, использовавшийся Π² Π΄Ρ€Π΅Π²Π½ΠΈΡ… славянских ΠΈ грузинских рукописях </div>

    Cross-browser solution through pseudo-selectors. Requires text-align: justify; and settings for .block-with-text:after the same color as the background:

     /* стили для мноточия '…' */ .block-with-text { /* ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ тСкст Ссли Ρƒ Π±ΠΎΠ»Π΅Π΅ N строк */ overflow: hidden; /* для установки '…' Π² Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ */ position: relative; /* ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для расчёта высоты Π±Π»ΠΎΠΊΠ° */ line-height: 1.2em; /* max-height = line-height (1.2) * число строк (3) */ max-height: 3.6em; /* исправлилСниС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΊΠΎΠ³Π΄Π° послСднСС слово Π½Π΅ соСдиняСтся с ΠΏΡ€Π°Π²ΠΎΠΉ стороны */ text-align: justify; /* мСсто для многоточия '…' */ padding-right: 1em; } /* создаём ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ … */ .block-with-text:before { /* ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ Π² ΠΊΠΎΠ½Ρ†Π΅ */ content: '…'; /* Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */ position: absolute; /* ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π² ΠΏΡ€Π°Π²Ρ‹ΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡƒΠ³ΠΎΠ» Π±Π»ΠΎΠΊΠ° */ right: 0; bottom: 0; } /* ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ … Ссли Ρƒ нас Π΅ΡΡ‚ΡŒ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ мСньшС ΠΈΠ»ΠΈ Ρ€Π°Π²Π΅Π½ количСству ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ строк */ .block-with-text:after { content: ""; position: absolute; /* ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π² ΠΏΡ€Π°Π²Ρ‹ΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡƒΠ³ΠΎΠ» Π±Π»ΠΎΠΊΠ° */ right: 0; /* ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ width ΠΈ height */ width: 1em; height: 1em; margin-top: 0.2em; /* Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΠ΅Ρ€Π΅Π΄ Π±Π»ΠΎΠΊΠΎΠΌ */ background: white; } 
     <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> 

       white-space: nowrap; /* Π—Π°ΠΏΡ€Π΅Ρ‰Π°Π΅ΠΌ пСрСнос строк */ overflow: hidden; /* ΠžΠ±Ρ€Π΅Π·Π°Π΅ΠΌ всС, Ρ‡Ρ‚ΠΎ Π½Π΅ помСщаСтся Π² ΠΎΠ±Π»Π°ΡΡ‚ΡŒ */ background: #fc0; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ text-overflow: ellipsis; /* ДобавляСм ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ */

      If not needed The background color can be removed and if needed this is -o-text-overflow

        In theory, I think you can wrap each word in a span with the help of JS and look at the coordinates (getBoundingClientRect or offset in jQuery), whether it goes beyond the wrapper ... Maybe there is an easier way ... But in general, here’s the article - https: / /css-tricks.com/line-clampin/

          Empirically, for example, set the block size in characters

           //js str = $('.my_div').html(); str = str.substr(0,127) + '...';//ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Ссли Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° 130 символов. $('.my_div').html(str);

          Of the minuses: when kerning various characters, the symbolic value of a block may conditionally change, but not greatly affecting the final result. Illustrative example (5 characters in each line):

          VVVVV
          AVAVA

          From the pros: the simplicity of the solution, the only question arises in counting characters (for example, fill the block with "O" characters and copy them before overflow into some notepad ++, see the number there)