# Wrap long text in Title in Dash **URL:** \ **Category:** Dash Python\ **Created:** [July 2, 2018, 5:34pm UTC](https://community.plotly.com/t/wrap-long-text-in-title-in-dash/11419 "2018-07-02T17:34:01Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![sharedobe](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sharedobe/32/2898_2.png) [@sharedobe](https://community.plotly.com/u/sharedobe)\ **Post date:** [July 2, 2018, 5:34pm UTC](https://community.plotly.com/t/wrap-long-text-in-title-in-dash/11419/1 "2018-07-02T17:34:01Z")
I have a long text in data that being used as title. When users hover over the graph, the text changes correspondingly. However, I have a text that is long and part of the text is being trimmed out. How can I wrap long text in title in Dash? Thank you! ---
**Author:** ![eliasdabbas](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eliasdabbas/32/30337_2.png) [@eliasdabbas](https://community.plotly.com/u/eliasdabbas)\ **Post date:** [July 2, 2018, 8:55pm UTC](https://community.plotly.com/t/wrap-long-text-in-title-in-dash/11419/2 "2018-07-02T20:55:28Z")
I come across that often, and you can use `textwrap` and Dash’s support for some HTML tags in titles. The one you can use here is the `
` tag. ``` import textwrap split_text = textwrap.wrap('This is a very long title and it would be great to have it on three lines', width=30) split_text ``` [‘This is a very long title and’, ‘it would be great to have it’, ‘on three lines’] `'
'.join(split_text)` ‘This is a very long title and it would be great to have it on three lines’ **Sorry this forum seems to also accept HTML tags and the previous line is actually on three lines although it should show the `
` tags! But that’s what you want 🙂** The `
`s in the the title would be interpreted as HTML tags, and the title should come out in several lines. The key parameter is the `textwrap.wrap` function’s `width` parameter, which you can use to customize the length of your lines. Hope that helps! ---
**Author:** ![radekwlsk](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/radekwlsk/32/1385_2.png) [@radekwlsk](https://community.plotly.com/u/radekwlsk)\ **Post date:** [July 3, 2018, 6:58am UTC](https://community.plotly.com/t/wrap-long-text-in-title-in-dash/11419/3 "2018-07-03T06:58:22Z")
That is indeed cool little library, and it is even included as standard library in Python, how comes I have never heard about it. But what you want to achieve should be also possible by CSS means, please share with us in what HTML tag you have that text. ---
**Author:** ![azdaly](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@azdaly](https://community.plotly.com/u/azdaly)\ **Post date:** [February 6, 2020, 3:00am UTC](https://community.plotly.com/t/wrap-long-text-in-title-in-dash/11419/4 "2020-02-06T03:00:07Z")
I am so grateful for this comment. Just wanted to highlight how clever of a solution this is. ---
**Author:** ![seanrez](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/seanrez/32/20533_2.png) [@seanrez](https://community.plotly.com/u/seanrez)\ **Post date:** [March 15, 2020, 7:26pm UTC](https://community.plotly.com/t/wrap-long-text-in-title-in-dash/11419/5 "2020-03-15T19:26:51Z")
You could also just put another html.H5() header (title) above the graph and use Bootstrap to do the wrapping for you. html.H5( id=‘main\_graph\_title’, className=‘text-center’, style={‘color’: ‘#7f7f7f’} ), # Chart with no title dcc.Graph(id=“main\_graph”), ---
**Author:** ![plotKamal](https://avatars.discourse-cdn.com/v4/letter/p/b5a626/32.png) [@plotKamal](https://community.plotly.com/u/plotKamal)\ **Post date:** [January 8, 2022, 11:27am UTC](https://community.plotly.com/t/wrap-long-text-in-title-in-dash/11419/6 "2022-01-08T11:27:41Z")
Perfect solution, when it comes to using with plotly express ---
**Author:** ![etonblue](https://avatars.discourse-cdn.com/v4/letter/e/bb73d2/32.png) [@etonblue](https://community.plotly.com/u/etonblue)\ **Post date:** [February 23, 2023, 4:41pm UTC](https://community.plotly.com/t/wrap-long-text-in-title-in-dash/11419/8 "2023-02-23T16:41:32Z")
This issue has plagued me in different charts for a long time. I recently discovered this same solution through a much later post on [Stack Overflow](https://stackoverflow.com/questions/62151608/how-to-wrap-text-in-plotly-pys-sunburst-diagram), but credit where credit is due to @eliasdabbas, who came up with it two years earlier. Given my struggles with implementing effective word wrap in different layouts and for different types of charts, I wanted to highlight how easily you can use this solution this to wrap any chart text: ```auto import textwrap def customwrap(s,width=30): return "
".join(textwrap.wrap(s,width=width)) ``` Example: Here is a basic 100 % stacked bar chart: ![newplot1](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/7/e7e1d439fb9c3370b0b51e35496b4eaca888269f.png) It may be a matter of taste, but to me, the labels are too long and the chart is too squished. Simply add the above function and adjust the width until you get something that works: ```auto import plotly import plotly.express as px import pandas as pd import textwrap cat = ['Some Text','Some Text','Some Text','Some Text', 'Some Longer Text','Some Longer Text','Some Longer Text','Some Longer Text', 'Some Even Longer Text','Some Even Longer Text','Some Even Longer Text','Some Even Longer Text', 'The Longest Text You Have Ever Seen','The Longest Text You Have Ever Seen','The Longest Text You Have Ever Seen','The Longest Text You Have Ever Seen'] val = [20,30,45,5,60,20,10,10,30,30,30,10,20,30,40,10] rat = ['Great','Good','Average','Bad', 'Great','Good','Average','Bad', 'Great','Good','Average','Bad', 'Great','Good','Average','Bad'] test_list = [list(row) for row in zip(cat, val, rat)] data = pd.DataFrame(test_list, columns=['Category', 'Value', 'Rating']) def customwrap(s,width=16): return "
".join(textwrap.wrap(s,width=width)) colors = plotly.colors.qualitative.Prism fig = px.bar( x= data['Value'], y = data['Category'].map(customwrap), color=data['Rating'], barmode='stack', orientation="h", color_discrete_sequence=colors, height=300, width=400 ) fig.update_layout( font_family="Open Sans, sans-serif", font_color="steelblue", font_size=8, ) fig.show() ``` Result: ![newplot2](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/9/09120d8832af470f631191194a1fe7b67a403cc2.png) ---
**Author:** ![alex.h](https://avatars.discourse-cdn.com/v4/letter/a/dec6dc/32.png) [@alex.h](https://community.plotly.com/u/alex.h)\ **Post date:** [July 19, 2024, 9:09am UTC](https://community.plotly.com/t/wrap-long-text-in-title-in-dash/11419/9 "2024-07-19T09:09:15Z")
Nice solution @etonblue. I’ve used this for wrapping my titles in the past, but not for the data labels themselves. I’ll definitely be using this in future.