So you have a very very long word in some HTML element:
verylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongword
As you can see what we miss is line breaks. This is a rare situation, but it may occur when you paste links or something. So the question is how to fix it.
Pure CSS needed
Simply add a fixed width and word-wrap.
width:400px; word-wrap:break-word; |
Now the result is obvious:
verylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongword
Nice example, i dont thing this is usefull though
This is perfect for something I have been trying to do, but i’m curious if theres a way to make tables /divs truncate overflow text in a cell with a set width and height, and display the text as a tooltip. Css needs to address issues of dynamic text more effectively. Theres always jquery tooltips but i’d love to see a more native solution.
Regarding the prior post – “i don’t think this is useful”? huh? why are people compelled to answer script related posts when they have absolutely nothing to say? How many times have I seen posts on javascript or css, with responses like “You shouldn’t / don’t need to do that / that’s not useful”… How the heck do you know what I should or need to do? Are you looking at my software? If I need to disable the mouse, break the back button, and make black on black text that’s 4 pixels tall… I have a reason.
This is briliant!
I’ve been having problem with long words messing up with my website layout for a long time.
This solves a big problem for me, it works like a charm!
Thank you!
for me this is not working
width:400px;
word-wrap:break-word;
can you anyone help me