Hi,
This is a simple todo list created with HTML, CSS, Javascript : Todo List
The problem is when I add an item (a longer string) using the input box the layout breaks by overflowing text out of the box.
How to fix this ? 
Appreciate your help.
1 Like
Hello @nimantha. Don’t worry, you can easily overcome this with the overflow CSS property.
What you should do:
- add
overflow: auto;toul li {}style rules. - You may not see any changes. It is because you added
justify-content: space-between. Change it tojustify-content: flex-start. - Hurray! Now you can see a horizontal scrollbar and the overflowing problem is gone!
But, we have a slight problem here. The “X” button is now close to the list. You may need to fix it using margins or flex properties.
For more info about overflow property:
EDIT:
I found some problems in your HTML code. You only need to add the code that is to be added to the <body></body> tags in codepen. No need to add <!DOCTYPE html>. Also, if you want to add code that should be in the <head></head> tags, click on the settings icon at the top of the HTML code box. Now you will see a textarea where you can add codes that should be in the <head></head> tags.
Hope this helps you
1 Like
@paulsonstech Thank you very much for your reply. Actually I followed your solution and it worked exactly as you have explained.
But I find it’s bit weird to have a scroll bar to navigate an item in the list. Can’t we make it wrap the overflowing part into the next line ?
(Actually it is my mistake, I haven’t clearly mentioned what I need.)
1 Like
Found the solution! You can use word-break: break-all property.
More info about word-break property:
1 Like
