CSS text-wrap

[fredrikpersson92]

I'm using CSS text-wrap: balance to enable line breaks. It works great in the browser. But the companion app (iOS) does not seem to support it. Seems to be an occuring problem with CSS in the app. Any ideas on how to solve long lines of text being cut off? I using a responsive layout so I cannot use line breaks instead.

[lhart-intelycare]

I am noticing this as well!

[mnneely]

I can't get word wrapping regardless. I tried 'balance' and 'normal' as values for word-wrap in the label style block with no luck. Below is the code and I've pasted what it looks like. Can anyone smarter than me figure out how to wrap the forecast text? Thanks.

type: custom:button-card
entity: weather.kcaaltad119
show_entity_picture: true
show_state: false
show_label: true
label: |
  [[[ 
    var x = "Today: <br>" + 
    states['sensor.kcaaltad119_weather_summary_0'].state +
    "<br><br>Tonight: <br>" +
        states['sensor.kcaaltad119_forecast_summary_1n'].state;
    return x;
  ]]]
aspect_ratio: 3/1
size: 50%
show_name: false
styles:
  card:
    - height: 80%
  grid:
    - grid-template-areas: '"i l"'
    - grid-template-columns: 1fr 3fr
    - grid-template-rows: 1fr
  img_cell:
    - align-self: start
  label:
    - justify-self: start
    - padding-left: 0px
    - word-wrap: balance
    - text-align: left
    - font-size: 12px
state:
  - value: partlycloudy
    entity_picture: /local/weather/partly_cloudy.png

[mnneely]

Well, I just found the right CSS to do this:

white-space: pre-wrap instead of word-wrap: balance or word-wrap: normal.

Now looks more like what I'm after.

[fredrikpersson92]

I was going to tell you to use text-wrap and not word-wrap. But it seems that white-space did the same trick? I have not seen/used that before so not sure what the difference is :)

[mnneely]

I could not get text-wrap to work, but here's what I found on white-space.
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space