# CSS to make Word Wrap on Tiles

**URL:** <https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319>\
**Category:** Ask for Help\
**Created:** [May 3, 2021, 12:54am UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319 "2021-05-03T00:54:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 3, 2021, 12:54am UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319/1 "2021-05-03T00:54:07Z")

</div>

Looking to use the text option as an overlay on Tiles (bottom left text), but also want it to word wrap. Can anybody help me with this?

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [May 3, 2021, 1:03am UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319/2 "2021-05-03T01:03:47Z")

</div>

Hola @Joe_Gabriele

Have you already checked this [thread](https://community.glideapps.com/t/beautiful-design-app/16191/241)?

There are tons of useful CSS codes that might help you with what you need.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 3, 2021, 1:21am UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319/3 "2021-05-03T01:21:21Z")

</div>

Thanks! I found it

```
<pre> <span> <style> 

.tile-title[data-test="tile-item-title"] {
white-space: break-spaces;
}
```

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 5, 2021, 2:33pm UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319/4 "2021-05-05T14:33:28Z")

</div>

Interesting thing I found.

The above CSS works, but when I type in the search bar to filter out results, the CSS no longer is applied. Anybody know how to avoid this from happening?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 5, 2021, 2:38pm UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319/5 "2021-05-05T14:38:57Z")

</div>

When you use search, the screen becomes a list style instead of a details style, so any rich text components are not available.

The only solution I could think of is to either not use search, or try to build your own with maybe a template column that joins all searchable columns together, and some creative relations, lookups, if columns (that checks ‘included in’) to try to make it reasonably functional.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 5, 2021, 2:50pm UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319/6 "2021-05-05T14:50:32Z")

</div>

Ah, I didnt know that! Thanks for that!

No way to make Details Style look one way and the List Style another way?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 5, 2021, 3:04pm UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319/7 "2021-05-05T15:04:14Z")

</div>

It’s something that became apparent in the following thread, but you would also have the same issue if you utilize “See All”.

> [@CSS spacing problem in inline list](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601):
>
> I can’t figure out how to fix this issue with an inline list. You can see in the screenshot that the group header is offset incorrectly. Previously, I added several Rich Text components with some CSS throughout the app to adjust colors, margin, and padding on other components (like the delete buttons). Somehow this inline list was affected. I went back and removed all of the Rich Text components, but the issue persists. Not sure what’s going on or how to fix. Any guidance is appreciated!

What do you mean by making the details style look different from the list style? Once you start using the search feature, then only lists are displayed on the screen. It might still be a details screen, or some kind of hybrid, but only the searchable lists are displayed at that point. Just keep in mind that injecting CSS into an app is a hack job at best. Some things will work and some things will not work. But most importantly, you can only apply CSS through a Rich Text component. If that Rich Text component becomes unavailable or hidden, then there is no way to get that CSS injected.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 5, 2021, 3:14pm UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319/8 "2021-05-05T15:14:38Z")

</div>

I believe in the List view, I can still change the size of the tile, # per row and my issue, the text overlay. With the “See All”, I can still change the way the Tiles look, even if CSS cannot be added.

Currently, in my Details view, I use Text Overlay with bottom left alignment + CSS to wrap the text. Gives it a much cleaner look.

But when I search and it switches to List view, could I change it to Text Below + Wrap?

I guess the other option, would be to remove Search from the primary screen, reduce the # of tiles shown and have people click “See All” and then search the tiles that way in a new format.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 5, 2021, 3:20pm UTC](https://community.glideapps.com/t/css-to-make-word-wrap-on-tiles/26319/9 "2021-05-05T15:20:38Z")

</div>

For my experience, if you have any css or code changing some style in your app and you click on the search bar and type, disable everything.

> [@Joe\_Gabriele](#):
>
> But when I search and it switches to List view, could I change it to Text Below + Wrap?

So, I guess that’s not possible