# CSS Trick: Longer Card Text and Move Avatar Image

**URL:** <https://community.glideapps.com/t/css-trick-longer-card-text-and-move-avatar-image/17975>\
**Category:** Community Resources\
**Created:** [November 5, 2020, 3:37am UTC](https://community.glideapps.com/t/css-trick-longer-card-text-and-move-avatar-image/17975 "2020-11-05T03:37:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [November 5, 2020, 3:37am UTC](https://community.glideapps.com/t/css-trick-longer-card-text-and-move-avatar-image/17975/1 "2020-11-05T03:37:36Z")

</div>

### Tips:

- Max 20 lines of Text

### Today’s Truth:

- Avatar Moved to top-left corner

 ![Screen Shot 2020-11-04 at 10.34.22 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/b/4b4fd0a6fe752d6e328806c164dd6bd5bc18fe25.jpeg)

```auto
<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;
}

```

---

<div class="post-metadata">

**Author:** ![Rob\_Watchmaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rob_watchmaker/32/45300_2.png) [@Rob\_Watchmaker](https://community.glideapps.com/u/Rob_Watchmaker)\
**Post date:** [April 22, 2021, 4:16am UTC](https://community.glideapps.com/t/css-trick-longer-card-text-and-move-avatar-image/17975/2 "2021-04-22T04:16:43Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [April 22, 2021, 11:55am UTC](https://community.glideapps.com/t/css-trick-longer-card-text-and-move-avatar-image/17975/3 "2021-04-22T11:55:10Z")

</div>

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

```

 ![Screen Shot 2021-04-22 at 7.55.01 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/5/35fa46e8aafd6e09c679aead404d16f93202dc40.jpeg)

---

<div class="post-metadata">

**Author:** ![Rob\_Watchmaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rob_watchmaker/32/45300_2.png) [@Rob\_Watchmaker](https://community.glideapps.com/u/Rob_Watchmaker)\
**Post date:** [April 22, 2021, 2:16pm UTC](https://community.glideapps.com/t/css-trick-longer-card-text-and-move-avatar-image/17975/4 "2021-04-22T14:16:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![V88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/v88/32/90054_2.png) [@V88](https://community.glideapps.com/u/V88)\
**Post date:** [April 22, 2021, 7:00pm UTC](https://community.glideapps.com/t/css-trick-longer-card-text-and-move-avatar-image/17975/5 "2021-04-22T19:00:08Z")

</div>

Does this solve the issue with card spacing 🤪