Question 309058 in Html Question posted in
Some basic documentation can be found here.

Html – How can I have a div in which to put a message that breaks and does not go outside the div?

I want to have a message displayed in Html

right now I have

f'<div style="width: 200px; height: 200px; border: 1px solid black; text-align: center; line-height: 200px;">{message}</div>'

The problem is if this message is too long, the rest of the message will appear outside and invade other elements space

Ideally I want something like

enter image description here

How should I modify the html?

I have tried

 noplot_message=f'<div style="width: 200px; height: 200px; border: 1px solid black; text-align: center; word-wrap: break-word; display: inline-block; line-height: 200px;">{message}</div>'

       noplot_message=f'<div style="width: 200px; height: 200px; border: 1px solid black; text-align: center; word-wrap: break-word;overflow-wrap: break-word ; word-break: break-word;line-height: 200px;">{message}</div>'

but it has not worked

Tags:

2

Answers


  1. 0

    You can use the CSS property overflow with the value hidden to hide the overflow content. Additionally, you can use word-wrap:break-word; Can set. Allowing long words to be broken up and wrapped to the next line.

    noplot_message = f'<div style="width: 200px; height: 200px; border: 1px solid black; text-align: center; overflow: hidden; word-wrap: break-word; line-height: 1.5;">{message}</div>'
    Login or Signup to reply.
  2. 0

    To get required result, the following HTML code can be used:

    <div style="width: 200px; min-height: 200px;  border: 1px solid black; word-break: break-word;line-height:1.5; padding: 50px 20px;">{message}</div>

    Thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search