Dépassement de bordure

Bonjours,
j'ai une fonction java scripte qui lorsque je coche une checkbox elle conctaéne une chaine de caractére à une autre. Le problème est que si la chaine total dépasse le width du <td> elle ne fait pas le retour à la ligne automatiquement, mais elle entre dans la collone suivante. est ce qu'il n'y as pas une astuce pour forcé le retour à la ligne, Merci
Voici l'empacement de la chaine de caractére

Code:

1
2
3
4
5
6
7
8
9
 
<tr height="25">
<td class="text5Table">
<div class="text8Table"><%=llabelsResBundle.getString("TotalPeriod")%></div>
</td>
 
<td class="text6Table"><input name="totPeriod<%=ProductDetailIndexTable%>" type="text" class="total_field" id="totPeriod<%=ProductDetailIndexTable%>" size="22"></td>
....
</tr>

voici les 2 classes css total_field,text6Table

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.total_field {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	text-align:center;
	background-color: #dfe0e1;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	text-decoration: none;
}
.text6Table{
	background-image:url("../image/tableHeader_bg.gif");
	font-size:11px;
	font-weight:bold;
	width:120px;
	text-align:center;
	border-top:solid 2px white;
	border-right:solid 2px white;
}

et voici le code javascripte

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function loadTatal(productId,subdoing,implcit)
{
 
             document.getElementById("totPeriod"+productId).value='';
             ....
            for(var subProductId=0;subProductId<ListOfProdcutALL[productId].length;subProductId++)
            {
 
                 var values="chekthis"+productId+subProductId;
                 var nms=document.getElementById(values).checked;
 
                if(nms==true)
                {       if(document.getElementById("totPeriod"+productId).value=='')
                			document.getElementById("totPeriod"+productId).value=ListOfProdcutALL[productId][subProductId][0];
                			else
                        	document.getElementById("totPeriod"+productId).value=document.getElementById("totPeriod"+productId).value+' & '+ListOfProdcutALL[productId][subProductId][0];
      ...                    
 
              }
        }
 
 
}

et voila le probleme