Solara•5d ago

Can solara.Card(title="Long title that would like 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.

Helleeni•4d ago

Kiitos Iisakki! Looks simple but failed find it by Googling (or Binging (is that a word?)) I'll give it a go thanks. 👍

Gaming

Programming

Can solara.Card(title="Long title that would like to word wrap instead of wrapping mid word")?