I had the challenge this week to create a body of text that displayed two lines of text and then expanded when the user wanted to “See More.” Creating a collapse is very straight forward using Bootstrap, but I wanted to display some of the text when the element was in the collapsed state.
Vanilla Collapse
Bootstrap gives us a very straightforward collapse implementation. No javascript, no extra CSS, just add a few attributes to the HTML elements and we are good to go!
Overriding Default Behavior
We want to modify the default behavior of the collapse plugin so that when the target element is in the collapsed state, it is visible. For this specific example, we will id our target element as #module. This way we don’t override all default collapse behavior on the page. The first thing we can do is change the display: block.
Display Only Two Rows
We only want to display the first two rows of the paragraph. To do this, we will have to set overflow: hidden and the height property. We need to do some math to adjust the height of our target element appropriately. Find the font-size and the line-height of the paragraph text and multiply them together to get the height of one line of text. Then multiply that value by the number of lines you want to display. In our case, that value is 2.
height = font-size * line-height * 2We have font-size: 15px and line-height: 1.5 so our height: 42px .
Remember, this is the height of the target element in the collapsed state. We need to remember only to target that element. Bootstrap is a great follower of web standards and uses the aria-expanded attribute to identify the targeted element’s state. We can use that in our CSS selector to ensure we only target the collapsed state.
Transitioning Properly
We need to adjust the collapsing transition of the target element. Bootstrap uses a CSS class .collapsing to add a CSS transition to the element, and sets the height: 0. The target element will close until it’s not visible at all, and then reappear after the transition has completed. If we set the height to our new collapsed state height: 42px, this won’t happen. The transition will close the target element smoothly until it reaches our newly established height and then complete.
#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;
}
And that’s it! With a few lines of CSS, we were able to override the default behavior of Bootstrap’s collapse and use it to fit our needs.
WebKit Bonus 🎉
If we are developing for a WebKit browser, we can add a few WebKit proprietary CSS properties to add multiline ellipses easily. Multiline ellipses open another topic for discussion, but in my case, I was developing for a WebKit browser (iOS), and I benefitted from the simple addition.
#module p.collapse[aria-expanded="false"] {
height: 42px !important;
overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Yes, in a perfect world we wouldn’t be using half-baked proprietary CSS properties. Believe me, I dream of the day when the browser wars of today are a thing of the past. Until then, just enjoy what we have!
