How to write html in a component string without introducting line breaks

Dash Python
1

I am using the Details component and it renders as expected when I feed the Summary subcomponent just a text:

html_details_normal

Now to style parts of the text I tried DangerouslySetInnerHTML as following:

html.Details([
              html.Summary(DangerouslySetInnerHTML(
                           "An <b>important</b> undertaking"))
              ...
             ])

And it sort of works. Dash renders it likes this:

html_details_bold

However, somehow a line breaks appears before the text. How can I get rid of the line break?

2

You don’t need DangerouslySetInnerHTML for this, you can just use dash_html_components: html.Span(['An ', html.B('important'), ' undertaking'])

1 Like
3

That works. Thanks!

But is there a way to do this with raw HTML? The reason is:

I have the same text as Summary in a Details component and as title attribute in a graph layout component - and from my understanding in the title attribute I have to use raw html, because objects are not allowed there.