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 19 Posting Whiz
DaveSW 15 Master Poster
What happens if you apply a width?
DanceInstructor 19 Posting Whiz
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> DaveSW 15 Master Poster
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.
DanceInstructor 19 Posting Whiz
Thanks Dave. I guess I'll have to deal with it in php then :(
wkd 0 Newbie Poster
you can use the css3 property [word-wrap: break-word;]
Wrams 18 Newbie Poster
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>
wkd 0 Newbie Poster
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.
randyman5775 0 Newbie Poster
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.
Wrams 18 Newbie Poster
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.
SimplyFred 0 Newbie Poster
I would suggest to use a unicode character code after every x normal character to allow/simulate some sort of variable linebreak. Use
 or
ὂ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
­is very poorly supported by the browsers.
wkd 0 Newbie Poster
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 0 Newbie Poster
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
SimplyFred 0 Newbie Poster
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.
wkd 0 Newbie Poster
It does break one word. I did this example, let me know if works for you.
http://webkingdev.com/misc/break-word.html
joecap5 0 Newbie Poster
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.