CSS Trick: Longer Card Text and Move Avatar Image


  • Max 20 lines of Text

Today’s Truth:

  • Avatar Moved to top-left corner

.card-subtitle {
-webkit-line-clamp: 20 !important;

[data-test="card-item"] {
margin: 10px;

[data-test=app-avatar-wrap] {
position: fixed !important;
top: -7px !important;
left: 15px !important;

Hey @Robert_Petitto – thanks for posting this great tip (and for all your contributions to this community!)

Is there an equally quick trick to wrapping Titles on cards? I’m hoping to extend my Title text to 3 lines … I’ve haven’t found a clear fix on the forum so far. Thanks for the help!

.card-title {
white-space: pre-wrap !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;


Brilliant, you’re the man. Thank you so much !!

Does this solve the issue with card spacing :crazy_face: