CSS to fix long lines of text with no spaces that push columns to the right
Posted on 2018-03-08
I have a table with a 45% width column on the left and a 55% width column on the right.
When a user types in "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" for testing, it pushes the first column into the space designated for the right column and runs it off the page, so now I have to fix it.
Even this website breaks it nicely and still allows a dynamic width. But I don't know how they did that.
I have tried adding this style to it to fix it, but it doesn't work:
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
I believe someone said they had to have a fixed width left panel.
Is there a fix for this? So it doesn't break the look and feel, other than telling people not to do that?