Making long strings of text break...

If I have a long string of text in say a table cell, how can I make it break so it doesn't cause horizontal scrolling? Thanks :)

DanceInstructor

Posting Whiz

368 posts since Feb 2005

Reputation Points: 17

Solved Threads: 14

7 Years Ago

0

What happens if you apply a width?

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

Nothing in Firefox. Works ok in IE. Let me post an ex:

[HTML]

Variablesstuff
01234567891123456789212345678931234567894123456789512345678912345678971234567898123456789912345678901234567891123456789212345678931234567898
[/HTML]

DanceInstructor

Posting Whiz

368 posts since Feb 2005

Reputation Points: 17

Solved Threads: 14

7 Years Ago

0

I see.

There is a whitespace property, but browser support is frankly pathetic.
http://www.w3.org/TR/REC-CSS2/text.html#white-space-prop
IE doesn't support it at all I don't think.

The only hacks I've seen to get around it involve a stray font called arial unicode and a space with 0 width... And apparently it doesn't work if you don't have the font, so it doesn't seem worth investigating.

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

Thanks Dave. I guess I'll have to deal with it in php then :(

DanceInstructor

Posting Whiz

368 posts since Feb 2005

Reputation Points: 17

Solved Threads: 14

2 Years Ago

0

you can use the css3 property [word-wrap: break-word;]

wkd

Newbie Poster

5 posts since Oct 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

Or simply add a
which will force your text to move to the next line.
each time you come to the end of the text just insert a
like this and it will automatically make it jump to the next line. Or another way is contain your text then that way it will be forced into a new line.

Not sure if I'm reading this thread right or not....Suppose I will soon be put right...;)

What about this?

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<title>Variables</title>
<style>
.var_name
{
width: 250px;
overflow: hidden;
}

.var_value
{
width: 500px;
overflow: hidden;
}

table
{
width: 750px;
}
</style>
</head>
<body>
<table border="1" >
<tr>
<td class="var_name">stuff</td>
<td class="var_value">012345678911234567892123456789312345678941234567895123456789
12345678971234567898123456789912345678901234567891123456789212345678931234567898</td>
</tr>
</table>[/HTML]

Wrams

Newbie Poster

22 posts since Nov 2008

Reputation Points: 28

Solved Threads: 1

2 Years Ago

Show Comments

-2

why would you do that when you can use css to automatically do it, how do you know where to put the break in all instances.. doesn't make sense. and what the hell are are you doing using tables still lol.

wkd

Newbie Poster

5 posts since Oct 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

The Idea of this forum is to help each other. Rather than laugh at people for still using tables, you could share what you know about fixing it with CSS.

randyman5775

Newbie Poster

1 post since Jul 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

Exactly my thoughts, he laughs but gives no help what so ever, I'm big on using rather than s but s are needed for certain things. ie: TabularData or Scoring cards, things like that. I never use s unless I really have to. If you can't help and just want to take the p*ss out of people trying to learn then whats the point in posting? The Guy asked for help and your laughing at him for having s in his HTML.

Wrams

Newbie Poster

22 posts since Nov 2008

Reputation Points: 28

Solved Threads: 1

2 Years Ago

0

I would suggest to use a unicode character code after every x normal character to allow/simulate some sort of variable linebreak. Use

&#x200A;

or

&#8002;

to insert a hair space. This leaves the text still readable i.e. the hair space is not realy visible.

It is not possible to force line breaks with CCS, and using

&shy;

is very poorly supported by the browsers.

SimplyFred

Newbie Poster

4 posts since Sep 2008

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

I gave help in previous post, i said use the css property [word-wrap: break-word;] in previous post. Was not laughing directly at the user at all, just in general so sorry if it came across that way. no need to get snotty about it take a chill pill, and do some more coding to calm your nerves ;).

wkd

Newbie Poster

5 posts since Oct 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

Hi simplyfred, it is possible to force line breaks with CSS. There are several methods with CSS3 although like you say its not 100% x-browser but it does work in most cases. Here are are few.
For the div or table that the text is going to be inside you can try one of these styles:

word-wrap: break-word;
word-break:normal;
word-break:keep-all;
word-break:loose;
word-break:break-strict;
word-break:break-all;

so for example in this case because its inside a table cell: <td class="breakme">worrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrd</td>

and for a div: <div class="breakme">worrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrd/div>

and the style:

<style type="text/css">
.breakme{word-wrap:break-word;}
</style>

If your table or div already has a style just add the property, or you can use mulitlpe classes in the same instance for example <div class="otherclass breakme"></div>

Hope this helps

wkd

Newbie Poster

5 posts since Oct 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

Hi wkd, sure, one can control the word wrap by CSS as long as you got words and spaces in your paragraphs etc. - word wrap does not hyphenate a word - so, even your sample does not work.

SimplyFred

Newbie Poster

4 posts since Sep 2008

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

It does break one word. I did this example, let me know if works for you.
http://webkingdev.com/misc/break-word.html

wkd

Newbie Poster

5 posts since Oct 2009

Reputation Points: 10