Solara•2mo ago

Solved: Can solara.Card(title="Long title to word wrap instead of wrapping mid word")?

Looks a little funny that longer titles on solara.Card wrap mid word rather than on whitespace. Any solution to this?

2 Replies

Hey @Helleeni! The solution is to use the CSS rule word-break: keep-all (or another value that isn't break-all). There are two potential implementations: 1. use solara.v.CardTitle:

import solara


@solara.component
def Page():
    with solara.Card(style={"width": "300px"}):
        solara.v.CardTitle(children=["This is a very long title that might not fit in the card"], style_="word-break: keep-all;")

import solara


@solara.component
def Page():
    with solara.Card(style={"width": "300px"}):
        solara.v.CardTitle(children=["This is a very long title that might not fit in the card"], style_="word-break: keep-all;")

see this py.cafe example 2. use CSS styles directly, either through solara.Style or in the custom CSS file of your project. The rule you need is

.v-card__title {
    word-break: keep-all;
}

.v-card__title {
    word-break: keep-all;
}

PyCafe - Solara - Solara Card Style Example

Create & Share Streamlit, Dash and Python Apps Online.

HelleeniOP•2mo ago

Kiitos Iisakki! Looks simple but failed find it by Googling (or Binging (is that a word?)) I'll give it a go thanks. 👍 Edit 240925: Tried method no 1. Confirmed, works OK thank you.

Gaming

Programming

Solved: Can solara.Card(title="Long title to word wrap instead of wrapping mid word")?