CSS Trick: Longer Card Text and Move Avatar Image

Tips:

  • Max 20 lines of Text

Today’s Truth:

  • Avatar Moved to top-left corner

<pre><span><style>
.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;
}
6 Likes

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!

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

3 Likes

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

Does this solve the issue with card spacing :crazy_face: