Who knows how to make it so that once a line in a block is transferred, and everything that does not fit into the second one is hidden behind dots? I did not come across this.

Specification: page design is flexible. Accordingly, the cell width varies depending on the screen. There is an idea to break a line on the client using JS

An example of what is needed

  • Found a solution. But the site does not give it from the smartphone normally describe (code). I'll come to my computer, lay out :) - Liki Velings

3 answers 3

Here is an option with an English SO .

But this solution is not supported by Explorer and Firefox .

.two-lines-only { /* суть дела */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* внешний вид */ font-size: 2em; height: 3em; line-height: 1.5; width: 15em; } 
 <div class="two-lines-only"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores dicta maxime dolorum. Illo harum pariatur dolorem, provident laborum maiores praesentium molestiae culpa molestias officia veniam aut neque rerum dolores! </div>

    That's what helped me solve the problem.

    http://dotdotdot.frebsite.nl

    Since it was also required to center the block vertically, that's what I did.

    HTML

     <div class="table_row_item"> <p>очень длинный текст, который надо перенести только один раз а в конце добавить многоточие, ага.</p> </div>

    CSS

     .table_row_item{ border: solid black 1px; width: 150px; padding: 5px; height: 30px; display: flex; align-items: center; } .table_row_item p{ line-height: 10px; font-size: 10px; width: 100%; height: 24px; }

    Js

     $(document).ready(function(){ $(".table_row_item p").dotdotdot({ callback: function(truncated){ $(this).css("height", "auto"); } }); });

      Ready JavaScript solutions can be found here: https://css-tricks.com/line-clampin/

      • links are not welcome as answers to Stack Overfow - Ipatiev
      • Well, I won't do this anymore. Let the user be left without any solution at all :) - holden321