Partial Collapse with Bootstrap 3

Vanilla Collapse

Overriding Default Behavior

Display Only Two Rows

height = font-size * line-height * 2

Transitioning Properly

#module {
font-size: 14px;
line-height: 1.5;
}
#module p.collapse[aria-expanded="false"] {
display: block;
height: 42px !important;
overflow: hidden;
}
#module p.collapsing[aria-expanded="false"] {
height: 42px !important;
}

WebKit Bonus 🎉

#module p.collapse[aria-expanded="false"] {
height: 42px !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brendan

Brendan

More from Medium

Changing my perspective towards CSS!

JavaScript add rows to the table dynamically

HTML

Styling an input range to have different track heights before and after the thumb

SYNTAX VS SEMANTICS; NAMING CSS CLASSES