css div testo "nascosto" se supera il width

**Vicar** · 17-08-2012, 10:51

Ciao ragazzi,
vorrei questo stile per il mio div ma non riesco a trovare come fare. (vi posto l'immagine)

Grazie per le risposte

**criric** · 17-08-2012, 11:00

Ciao,
puoi usare la proprieta overflow impostata su hidden che ti nasconde il contenuto in eccesso

Codice:

div#div {
     overflow:hidden;
}

**Vicar** · 17-08-2012, 11:44

Se faccio come dici pero i <li> vanno a capo e non stanno in linea con il testo.. Capisci?

Grazie

**borgo italia** · 17-08-2012, 17:15

ciao
ti faccio notare anche se tu avessi del testo senza li andrebbe a capo
se scrivi
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaa con idden si nasconde
se invece scrivi
aaaaaa aaaaaaaa aaaaa aaaaa aaaaaa aaaaaaa aaaaa aaaaa aaaaa con idden va a capo

**Vicar** · 17-08-2012, 19:12

Esatto, quindi come posso fare?

**borgo italia** · 17-08-2012, 19:20

ciao
solo con i css non saprei.
se dovessi farlo io con php taglerei il testo al numero di caratteri che mi servono per non farlo sbordare

**Vicar** · 17-08-2012, 19:28

Il problema e che io vorrei tenere tutte le li che apro in fila per poi fare una slide dei vari li in modo che Anche quelli nascosti si posssano vedere?

**borgo italia** · 17-08-2012, 19:58

ciao
dai un occhio a questo (anche se è un po' un casino)

Codice HTML:

<style type="text/css">
#dav {
	width:200px;
	background-color:#CCCCCC;
	overflow-x: auto;
}
li, p{width:600px; }/*larghezza da valutare in funzione del testo più lungo*/

</style>
<div id="dav">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>di camin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita</p>
  <ul>
    <li>nel mezzo</li>
    <li>di camin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita</li>
    <li>pape satan pape satan aleppe gridò pluto con la voce chioccia</li>
  </ul>
</div>

**Vicar** · 17-08-2012, 21:00

Perfetto, ci siamo. Ho modificato secondo le mie esigenze.
Cosi esiste un menu orizzontale infinito

Codice HTML:

<html>
<head>
<style type="text/css">
#dav {
	width:600px;
	background-color:#CCCCCC;
	overflow-x: auto;
	overflow:hidden;
}
ul {list-style-type:none;width:500000px;};
li{width:100px; }/*larghezza da valutare in funzione del testo più lungo*/

ul li{
	float:left;
	display: inline;
}



</style>
</head>
<body>
<div id="dav">
  <ul>
    <li>nel mezzo</li>
    <li>di camin di  checamin di nostra vita mi ritrovai per una selva oscura checamin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita</li>
    <li>pape satan pape satan aleppe gridò pluto con la voce chioccia</li>
  </ul>
</div>



</body>
</html>

**Max 1** · 17-08-2012, 23:10

Originariamente Scritto da Vicar

.......
width:600px;
background-color:#CCCCCC;
overflow-x: auto;
overflow:hidden;
......

Cosa serve mettere due overflow, quando il secondo elimina l'effetto del primo?

Poi se qualcuno mi spegasse cosa serve avere del testo che non va a capo quando finisce il div, gliene sarei veramente grato! Un giorno potrebbe servire anche a me e io ora proprio non lo capisco!

Discussione: css div testo "nascosto" se supera il width

Strumenti Discussione

Visualizzazione

css div testo "nascosto" se supera il width

Tag per Questa Discussione

Permessi di Scrittura