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 :)

Recommended Answers

All 15 Replies

What happens if you apply a width?

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

<!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">01234567891123456789212345678931234567894123456789512345678912345678971234567898123456789912345678901234567891123456789212345678931234567898</td>
</tr>
</table>

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.

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

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

Or simply add a <br /> which will force your text to move to the next line.
each time you come to the end of the text just insert a <br /> 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?

<!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<br />
12345678971234567898123456789912345678901234567891123456789212345678931234567898</td>
</tr>
</table>

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.

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.

Exactly my thoughts, he laughs but gives no help what so ever, I'm big on using <div> rather than <table>s but <table>s are needed for certain things. ie: TabularData or Scoring cards, things like that. I never use <table>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 <table>s in his HTML.

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.

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 ;).

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

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.

In Safari 4.0.4, at least, it looks like word-wrap: break-word; does not work with <span> elements. It does work with <p> though.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.