Cutting text vertically or what to do if the text does not fit in height

If this is familiar to you, then please under cat.


Most recently came across such a problem. Long googling if gave the result is very half. In CSS, there is a text-overflow for horizontal text overflow, but there is no analogue for such an overflow vertically. Many suggest using nowrap in a place with text-overflow, but this approach is not universal and suits very few people. If we have an arbitrary html code in the block, then there is no way out. On some well-known sites they wrote: “There is no solution for this task, try to fit a whole number of lines into the block”. In addition, some suggested using JS, which was also not acceptable.
Such answers did not suit me, and after an hour of reflection, the answer was found. Immediately make a reservation, I am not very tied to the old IE browsers, but the work in old iOS is important. The solution is actually very simple and probably does not require all the text that I have already written, but I really wanted to share, especially since I did not see that someone would use this way.
So to solve this problem, we take css multicolumn on Habré already many articles on this topic.
We offer we have html:

<div class="box"> <h2>A Long Message</h2> <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p> <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p> </div> 

And CSS:

 h2 { font-size: 1.3em; } .box { margin: 1em; border: 1px solid #ccc; width: 150px; height: 55px; overflow: hidden; } 

')
In this case, our text is likely to be cut in half.
Now, if we want to get rid of this effect, we need to add some kind of wrapper:

 <div class="box"> <div class="wrapper"> <h2>A Long Message</h2> <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p> <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p> </div> </div> 

Here with this or style:

 .wrapper { -webkit-column-width: 150px; //        , 100%   column-width: 150px; height: 100%; } 

Actually, that's all ... those lines that do not fit will flow into the next column, and since the parent block has overflow: hidden, we will not see them. The disadvantage of this approach can only be the speed of working out this action by the browser, but it is still much faster than surrogates on JS. If you're worried about browser support, it's already very good: caniuse.com/multicolumn . Here is a working example: jsfiddle.net/4Fpq2/9 .
I apologize in advance if it was just a discovery for me.