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

Posted on 2018-03-08
High Priority
Last Modified: 2018-03-09
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?

Question by:Starr Duskk
LVL 84

Expert Comment

by:Dave Baldwin
ID: 42493210
I think what you are looking for is "overflow: hidden;" .   https://www.w3schools.com/cssref/pr_pos_overflow.asp
LVL 24

Accepted Solution

Snarf0001 earned 3000 total points
ID: 42493654
I think you want a combination of word-wrap and break-word:

Open in new window


Author Closing Comment

by:Starr Duskk
ID: 42493803
thanks! that fixed it!

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question