Black Lives Matter. Please consider donating to Black Girls Code today.
Dash Enterprise delivers an incredible 21x cost savings 💸Download the e-book!

Make the text fit to the button width?

Hi guys,

I am making a web app with plotly dash. Ofcourse there is a callback, and then def, and finally result output to a children.

The callback is as follow,

@app.callback(
    Output('prediction-content', 'children'),
    [Input('input', 'value')]

The output from the def is a long message, with the model forecast, which is like below:

def predict(input):

    function(input)
    results = f'xxxxxx ${pred:,.0f} xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx'

    return results

The children is in this Div

html.Div([
                html.Button(id='prediction-content'),
            ]),

So the result is like this,

Now my problem is, when i shrink the browser, the button is responsive (as the CSS of it is width: 100%), but the text on the button isn’t. You can see the sentence is just cut.
Screen Shot 2020-08-13 at 1.19.54 PM

So How to wrap the text to fit the button? like the rest of the sentence goes to the next line, rather than being cut sharp?

thank you