Solved

Break text, not layout

Posted on 2004-09-17
7
350 Views
Last Modified: 2012-05-05
I have some long text that is breaking my css layout.  How can I make it wrap when it gets to the right side of its box NO MATTER WHAT?  I've tried using vbscript (asp) to insert line breaks every 100 characters, but that's not working so well.  I could use JavaScript.  The ideal solution would be a css property or something.   Thanks!

Here's an example (gotta love the line art)
The 3 column css layout
------------------
|    |        |     |
|    |        |     |
|    |        |     |
|    |        |     |
------------------

With long text:
------------------
|    |BREAK!
|    |        ____
|    |        |     |
|    |        |     |
-----         |     |
                -----
------------------
   
0
Comment
Question by:dbMe
  • 4
  • 3
7 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 125 total points
ID: 12085565
Hi dbMe,

For CSS, there's the IE-only word-wrap:

word-wrap:break-word;

The only other way with Mozilla and NS, for instance, is to use a Javascript or a server-side. I know that PHP has a wordwrap function but I don't know about ASP.

Regards,
Zyloch
0
 

Author Comment

by:dbMe
ID: 12085620
THAT IS BEAUTIFUL.
Thank you kindly.  How could I do this in JS (in the event that I have do do this for a non-native IE crowd)?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12085713
Anything like that will be a little hackish I'm afraid and somewhat estimatable.

You'll probably need to estimate the amount of characters per line, and you'd have to give a fixed font size, like 12pt or something so the user can't change it.

var hl=75;   //say there's 75 characters per line.

function breakWord(wrd) {
   var wrdArray=new Array;
   for (var i=0;i<Math.ceil(wrd.length/75);i++) {
      wrdArray[i]=wrd.substr(75*i,75*(i+1));
   }
   return wrdArray;
}
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:dbMe
ID: 12085746
Thanks a lot.  I also found this link on ASP101.com: http://www.asp101.com/samples/viewasp.asp?file=wordwrap.asp.  It looks like it'll do the trick, although I think you're right, anything like that would be a little hackish.
0
 

Author Comment

by:dbMe
ID: 12085758
That was an easy one eh?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12085762
Hopefully, things like these will be fixed in the future, well, glad to help ;)
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12085770
Somewhat :)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
two submit buttons one form 15 99
API Soap Calls 4 126
Cordova Camera plugin fails 2 143
Download a website to hdd 2 82
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

821 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