IE Word-wrap

**spillo491** · 06-09-2011, 16:01

Ciao, ho un problema con una tabella che eccede lo spazio a disposizione (ha width 100% in un div con width di 820px) e fa apparire lo scroll orizzontale nella pagina, causa la colonna descrizione.
Firefox gestisce tutto correttamente mentre IE no; ho provato a impostare word-wrap:break-word sulla colonna descrizione ma non fuzniona a meno che imponga layout fixed alla tabella.

Visto che vorrei evitare, ci sono altre soluzioni per far funzionare il word wrap ?

Grazie

**fmdesignlab** · 06-09-2011, 18:43

Ciao, se con firefox (e immagino anche gli altri browser) funziona tutto bene, perchè non provi a creare una regola solo per IE e impostare la larghezza della tabella invece che a 100% magari a 90% potrebbe essere una buona soluzione per aggirare il problema senza impazzirci dietro.

**spillo491** · 06-09-2011, 22:01

Purtroppo la tabella deve essere larga il 100% da specifiche .... mi interessava capire meglio come far funzionare questo word-wrap, dalle specifiche sembra di capire che deve essere applicato ad un elemento con layout, tipo un elemento a posizione assoluto, un elemento di blocco o un elemento inline con width o height fissate. Però ho provato a mettere il contenuto della cella in un div, dare a questo div il word wrap ma non funziona comunque ....

**Prill** · 06-09-2011, 22:42

Per far sì a un elemento "senza layout" si possa applicare una proprietà che in Explorer richieda un hasLayout, si può aggiungere al css (magari solo per Explorer) uno zoom:1; . Ma forse il problema non è il word-wrap ma la tabella. Nel caso non tutte le dimensioni siano impostate precisamente, il comportamento di Explorer è diverso da quello degli altri browser nel ridimensionare le celle. Eventualmente puoi farci vedere il codice

**spillo491** · 07-09-2011, 09:18

Ecco il codice, se restringete la finestra a circa 900px vedrete apparire lo scroll orizzontale in IE

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title></title>
		<style type='text/css'>
			
			body {
				font-family: "Trebuchet MS";
				background: none repeat scroll 0 0 #FFFFFF;
				margin: 0;
			}

			table {
				border-collapse: collapse;
			}
			
			table, tbody, tr, td {
				border: 0 none;
				margin: 0;
				padding: 0;
			}
			
			tr.titolo {
				border: 1px solid #F0F0F0;
				
			}
					
			.titolo {
				background: none repeat scroll 0 0 #FFFFFF;
				border: 1px solid #F1F1F1;
				color: #2E719A;
				font: bold 12px/10px "Trebuchet MS",sans-serif;
				padding: 6px 1px;
			}	

			tr {
				margin: 0;
				overflow: visible;
				padding: 0;
			}
			
			
			
		
		</style>
	</head>
 
	<body>
	
		<table width="100%" cellspacing="0" cellpadding="2" border="0" >
			<tbody>
				<tr class="titolo">
					<td class="titolo" width="9%"> 
						 Colonna1
					</td>
					<td class="titolo" width="9%"> 
						 Colonna2
					</td> 
					<td colspan="2" class="titolo" width="51%"> Colonna3</td>
					<td class="titolo" width="5%"> Colonna4</td>
					<td align="right" class="titolo" width="13%"> 
						 Colonna5
					</td>
					<td align="right" class="titolo" width="13%"> 
						 Colonna6
					</td>
				</tr>
				
				<tr>
					<td class="riga">
						<span>
							<a > test</a>
						</span>
					</td>
					<td class="riga">								
						<span>test</span>
					</td>
					<td colspan="2" class="riga" style="word-wrap: break-word;">
						testtesttest
						
						:testtest03226 :test:5000000 :test :test:test :test:20400 :CO1:testtesttest :DT6:testtest :DTN:testtesttesttest S.P.A. :ERI:test 000000005000000 :IM1:5000050 :ISP:50 :MA1:test :OR1:testtesttesttest SPA :SC1:06723 :MO1:testtesttest 
					</td>
					<td class="riga">test</td>
					<td align="right" class="riga"> <span>test</span> </td>
					<td align="right" class="riga"> <span></span> </td>
				</tr>
			
			</tbody>
		</table>			

	</body>
</html>

grazie

**Mich_** · 07-09-2011, 11:50

Hai provato ad usare una DTD Strict? (io consiglio XHTML 1.0 Strict)

IE si comporta (quasi) bene con una DTD Strict

**spillo491** · 07-09-2011, 12:08

Non risolve il problema

**Prill** · 07-09-2011, 16:16

Ti dirò qualcosa di strano, nel tuo codice prova semplicemente a sostituire nel testo i due punti con una qualsiasi lettera e il word-wrap funziona (provato su ie6, non ho versione più recente)

**spillo491** · 07-09-2011, 16:22

Vero, però non posso togliere nessun carattere, ho risolto mettendo nel td una cosa del tipo

codice:

<div style="word-break: break-all;">
 ... descrizione ....
</div>

**spillo491** · 07-09-2011, 16:25

Anzi funziona anche dando semplicemente style="word-break: break-all;" al TD

Discussione: IE Word-wrap

Strumenti discussione

Ricerca discussione

Visualizza

IE Word-wrap

Permessi di invio