• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 40
  • Last Modified:

CSS to fix long lines of text with no spaces that push columns to the right

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:
.LongLineWrap {
   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?

Starr Duskk
Starr Duskk
1 Solution
Dave BaldwinFixer of ProblemsCommented:
I think what you are looking for is "overflow: hidden;" .   https://www.w3schools.com/cssref/pr_pos_overflow.asp
I think you want a combination of word-wrap and break-word:

Open in new window

Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
thanks! that fixed it!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now