Force text to wrap at edge of box

[AKalair]

Hi,

 

I am querying a mysql database to get the text of a news story

 

But I have a problem. If the text is really long rather than wrapping down to the next line it just carries on and stretches the screen horizontally.

 

Is there a way I can force it to wrap once it reaches the edge of the box ?

 

Here is the design I'm using:

 

http://www.axac22.dsl.pipex.com/

 

I'm trying to put the text in the center box

 

 

Thanks

 

[gijew]

This would probably be better handled by CSS but you could always use the wordwrap function.

 

http://us.php.net/wordwrap

[AKalair]

Hi,

 

Thanks for the reply heres my CSS if it helps

 

/* CSS to control colours and alingment in all browsers except IE 7 and below */

/* Unkown probably layout rules */
.equal {
	display:table;
	border-collapse:separate;
}
.row {
	display:table-row;
}
.row div {
	display:table-cell;
}


/* Styling rules to make the example look nicer */
html,body {
background: #000000;     /* Page background colour */
}
body {
	font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}

/* Box behind the three columns NOT page */

.equal 
{
margin:10px auto;
border-spacing:10px;
background:#FFCC00; 
width:100%;
}

/* Left column, Navigation */

.row div.one 
{
background: #F72406; 
width: 15%;
}

/* Middle Column */

.row div 
{
background: #0066FF; 
}

/* Right Colum */
.row div.three 
{
background: #33CC99;
width: 15%;
}

/* Banner */	
.banner 
{
height: 10%;
}

/* Footer */

#footer 
{
text-align:center;
background: #FFFFFF;
}


/* Fonts */

a.bargains:visited {color: #0000CC}
a.bargains:link {color: #0000FF}
.bargains { font-size:16px}

.Headings
{
font: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 18px;
}

.Sub_Headings
{
font: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 16px;
}

.Standard_Text
{
font: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 14px;
}

a:link {
color: #FFFFFF;
font: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}

a:visited {
font: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
color: #CCCCCC;
}

[mikesta707]

just set a specific width for the element that has the text. it should word wrap then. if you need further help, consult this tutorial: http://www.w3schools.com/css/

 

[AKalair]

Hi,

 

Thanks for the response I specified a width for the center box:

 

/* Middle Column */

.row div 
{
background: #0066FF; 
width: 70%;
}

 

But it still isnt wrapping?

[TeNDoLLA]

You could use overflow: hidden; but then the overlapping text would be also hidden. Or overflow: scroll; to make it scrollable but still keep the width. Or consider wrapping the text in the php side with wordwrap() before echoing it.