Help for adding newline in the html file of Dash

I have a big problem with my Dash app,

Basically the project is to make a dashboard, half made of graphs (left side) and the other side should display data from a table imported from an Excel file (i used Pandas for this).

This problem concerns the right side of the board, when I import data from my Excel file, they are not being displayed line by line, but instead the lines are “stuck” together.

An example :

Here you can see in red where there should normally be a newline \n so we can see the data line by line like this :

20/01 | 17:00 | Text description here1
17/01 | 11:00 | Text description here2                                                            
16/01 | 16:32 | Text description here3

And I’ve been searching hours and I didn’t find a way to do it, given that I’m using Dash as my html page, because I believe it can be done with some framework but it would require to use a “proper” html file instead of using the method provided by Dash. I start to believe that I should chuck out everything… Some help would be very welcome, thank you.

The code so far is :

# Importation of the file
file = r".. test.xlsx"

df = pd.read_excel(file)

except OSError:
print("Impossible to read :", file)

# Here we display the information from the file
test = []
for index, row in df.iterrows():
x = row['Date'] + ' | ' + row['Description'] + ' | ' + row['Titre de la consigne'] + ' | ' + row['Prenom'] + ' | ' 
+ row['Choix des equipements 1'] + ' | ' + row['Choix des equipements 2'] + ' | ' + row['Prenom'] + '\r\n'

df_string = '\n'.join(test) # adding a '\n' at the end of each line but it doesn't change anythin

And I take df_string that I my into html.P like this :


Hi @BeginnerDash,

You could try adding line breaks with html.Br() at the end of each row.
Alternatively you could display your data in a dash_table.DataTable (link to the docs)

Thank you for the reply, but how do you automatically add htm.Br() at the end of each line ? I tried df_string = ‘html.Br()’.join(test) but it doesn’t work.

I’m going to take a look at the dash table.

You could use something from this post, especially the intersperse function might be useful here, with the list parameter being your test and the item parameter being html.Br().

Code snippet
# Here we display the information from the file
test = []
for index, row in df.iterrows():
    line = row['fruit'] + ' | ' + str(row['count']) + ' | ' + row['city'] 

data = intersperse(test, html.Br())

app = Dash(__name__)

app.layout = html.Div([
    html.P(children = data)])

if __name__ == '__main__':

But I’d highly recommend using a datatable instead, it’s much neater and offers a lot of interactivity.

Thank you so much for the help ! I’ll see if I can display the same information with the same presentation with the datatable.

However do you know how to fix this :

It doesn’t seem to take into account the margin, I’m trying to find a fix for it. Just to get the extra text beneath the first line in case it overflows.

Edit : nevermind it worked with the “overflow-wrap: break-word” CSS property, thank for so much for your help !

Edit#2 : Though I am trying to fix this (text should always fit in the container and be displayed fully, if it does not it shouldn’t display the line, for example here the line 12/01/22 should be automatically removed) :