S
Solara3mo ago
Helleeni

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
iisakkirotko
iisakkirotko3mo ago
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.
Helleeni
HelleeniOP3mo 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.
Want results from more Discord servers?
Add your server