CSS trick: non-wrapable lines with div’s (without tables)

Thursday, August 6, 2015

Here is the simplest CSS-style that allows to make *any* content inside *any* HTML-page element non-wrapable without using TABLE’s.

<style>
.singleline {

display: table;

table-layout: fixed;

width: 100%;

overflow: hidden;

white-space: nowrap;

}
</style>

Example:

This is the 2-column table... Left column has very long line...
Twas brillig, and the slithy toves did gyre and gimble in the wabe all mimsy were the borogoves, and the mome raths outgrabe.	Right column of the table

...and the same table with the "singleline" class in left column:

This is the 2-column table... Left column has very long line...

Twas brillig, and the slithy toves did gyre and gimble in the wabe all mimsy were the borogoves, and the mome raths outgrabe. Right column of the table