Mushroom Text Wrap | Home Assistant | Page 1

dapper igloo Jul 16, 2025, 7:06 PM

#

Hello I am trying to get the name text to wrap. Any easy solution? Thank you!

#

entity: sensor.weather_station_temperature
name: Outdoor Temperature
fill_container: false
icon: mdi:thermometer
layout: vertical
grid_options:
  columns: 4
  rows: auto```

silk pebble Jul 16, 2025, 7:43 PM

#

entity: sensor.weather_station_temperature
name: Outdoor Temperature
fill_container: false
icon: mdi:thermometer
layout: vertical
grid_options:
  columns: 4
  rows: auto
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        white-space: normal !important;}```

#

Have fun

#

dapper igloo Jul 16, 2025, 8:00 PM

#

Thank you very much TPC!

dapper igloo Jul 16, 2025, 8:21 PM

#

One more hopefully quick question, I am trying to remove the background and shadow. I have done this for other cards and it works but not finding how to combine the text wrap and background removal. Any suggestions? I followed a the card mod guide but not sure what is wrong.

  style: 
    mushroom-state-info$: |
      .primary {
        white-space: normal !important;}
    ha-card {
      background-color: none;
      box-shadow: none;```

silk pebble Jul 16, 2025, 8:33 PM

#

  style:
     mushroom-state-info$: |
      .primary {
        white-space: normal !important;}
     .: |
      ha-card {
        box-shadow: none;
        background: none;}```

#

Might have to add !important in some cases

#

But it's cleaner if you can make it work without it

dapper igloo Jul 16, 2025, 8:36 PM

#

thank you, so the .: | is essentially an "and"?

silk pebble Jul 16, 2025, 8:39 PM

#

It's the main class I think?
It acts the same as styles: |
That's all I know. I don't really know css well. I just learned some basic patterns for my dashboard lol

dapper igloo Jul 16, 2025, 8:44 PM

#

yeah i'm trying to pick all these little things up. very confusing to me as I don't code. lots of copy paste. Thank you again!

silk pebble Jul 16, 2025, 8:46 PM

#

No problem! I'm not a coder either. But if you have a basic understanding and know exactly what you want you'll eventually get there. Might just take a bit longer.

dapper igloo Jul 16, 2025, 8:53 PM

#

i am an architect / designer so i know EXACTLY what I want. getting there is tricky because things need to look good hahah

noble mirage Jul 16, 2025, 8:53 PM

#

dapper igloo thank you, so the .: | is essentially an "and"?

Go to the Mushroom/card_mod thread in the forum. https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472
After the list of cards, expand the section called What the $ and .: | symbols do for more info.

dapper igloo Jul 16, 2025, 8:53 PM

#

oh fantastic. this will help a lot. thank you

#Mushroom Text Wrap