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.
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.
Hello @nimantha. Don’t worry, you can easily overcome this with the overflow
CSS property.
What you should do:
overflow: auto;
to ul li {}
style rules.justify-content: space-between
. Change it to justify-content: flex-start
.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
@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.)
Found the solution! You can use word-break: break-all
property.
More info about word-break
property: