Leave a blank line if there is no text
I am trying to make my list view consistent. However, each title has a different length. I want it to look consistent - regardless of the content.
I am trying to do the following:
- Limit the text to a maximum of two lines of text (with "..." to indicate short text)
- If the text is less than two lines, leave an empty line
- Stay vertically centered
https://codepen.io/yarnball/pen/pPOQEg
I have tried but with no success:
.mdl-list__item-primary-content {
line-height: 20px;
}
or
.mdl-list__item-primary-content {
line-height: 20px;
line-height: 40px;
}
Screenshot for clarification:
+3
source to share
1 answer
I'm not sure what you mean by "vertical centering" because you can't add a second line to fill in the gap. But otherwise, you can add this to your container's CSS to solve problems 1 and 2.
white-space: wrap;
height: 2.1em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
+1
source to share