Scott Parsons' solution for auto-adjust layout

by tnhu

HTML

<div class="container">
    <div class="aside">101</div>
    <div class="content">
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices faucibus ornare. Morbi in odio quis orci hendrerit varius. Nulla eu posuere erat. Quisque suscipit porttitor metus ac elementum. In eget convallis sem. Nunc gravida libero nisl, sed condimentum leo feugiat et. Donec at quam nec tellus vulputate vehicula quis aliquet turpis. Phasellus in ligula eu sapien malesuada cursus.</p>
    </div>
</div>

CSS

.container {
    display: table;
    width: 300px;
}
.aside {
    display: table-cell;
    vertical-align: middle;
    font-size: 30px;
}
.content {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    padding-left: 20px;
}
.content .text {
    font-size: 15px;
    line-height: 20px;
    overflow: hidden;
    max-height: 60px; /* 3 * line-height */
    /* webkit ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    /* opera ellipsis */
    text-overflow: -o-ellipsis-lastline;
}