css div testo "nascosto" se supera il width

Vicar

Utente Attivo
15 Gen 2010
48
0
0
Ciao ragazzi,
vorrei questo stile per il mio div ma non riesco a trovare come fare. (vi posto l'immagine)




Grazie per le risposte
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
puoi usare la proprieta overflow impostata su hidden che ti nasconde il contenuto in eccesso
Codice:
div#div {
     overflow:hidden;
}
 

Vicar

Utente Attivo
15 Gen 2010
48
0
0
Se faccio come dici pero i <li> vanno a capo e non stanno in linea con il testo.. Capisci?

Grazie
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
ti faccio notare anche se tu avessi del testo senza li andrebbe a capo
se scrivi
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa con idden si nasconde
se invece scrivi
aaaaaa aaaaaaaa aaaaa aaaaa aaaaaa aaaaaaa aaaaa aaaaa aaaaa con idden va a capo
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
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

Utente Attivo
15 Gen 2010
48
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
dai un occhio a questo (anche se è un po' un casino)
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

Utente Attivo
15 Gen 2010
48
0
0
Perfetto, ci siamo. Ho modificato secondo le mie esigenze.
Cosi esiste un menu orizzontale infinito

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>
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.280
330
83
.......
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!
 

Vicar

Utente Attivo
15 Gen 2010
48
0
0
Si quello mi e rimasto scritto, in verita non serve. Comunque guarda per esempio la doc di dojo, e fatta con le tab, siccome le tab sono "infinite" potrebbero non starci nella pagina percui si devono nascondere, capito?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Volevo farvi notare un'altro utilizzo della proprietà overflow impostata ad hidden
HTML:
<html>
    <head>
        <title>Esempio</title>
        <style type="text/css">
            html body {
                text-align: center;
            }
            #contenitore {
                margin:auto;
                width: 800px;
                background-color:#990000;
                /* senza questa proprieta il div contenitore praticamente è inesistente su FF e CHROME*/
                overflow: hidden; 
            }
            #menu {
                float: left;
                width:200px;
                background-color:#AAAAAA;
            }
            #corpo {
                float: left;
                width:400px;
                background-color:#CCCCCC;
            }
        </style>
    </head>
    <body>
        <div id="contenitore">
            <div id="menu">
                <br/>menu
                <br/>menu
                <br/>menu
                <br/>menu
                <br/>menu
                <br/>menu
                <br/>menu
                <br/>menu
                <br/>menu
            </div>            
            <div id="corpo">
                <br/>corpo
                <br/>corpo
                <br/>corpo
                <br/>corpo
            </div>
        </div>
    </body>
</html>
Se usate Firefox o Chrome provate a toglierla e vedrete il contenitore sparire
Internet Explorer probabilmente tratta i contenitori in modo diverso
Ho perso un sacco di tempo all'inizio per riuscire a trovare questa soluzione per i miei primi template
I colori non sono mai stati il mio forte :rolleyes:
A voi i commenti
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Con height:100% prende tutta la pagina

Con overflow:hidden il contenitore si adatta al contenuto

Sopra e sotto ci andrebbero in ordine header e footer
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Forse cosi rende meglio l'idea :
HTML:
<html>
    <head>
        <title>Esempio</title>
        <style type="text/css">
            html body {
                text-align: center;
            }
            #contenitore {
                margin:auto;
                width: 800px;
                background-color:#BBBBBB;
                /* senza questa proprieta il div contenitore praticamente è inesistente su FF e CHROME*/
                overflow: hidden; 
            }
            #header {
                width:100%;
                height:90px;
                background-color: #E4E4E4;
            }
            #menu {
                float: left;
                width:200px;
                background-color:#AAAAAA;
            }

            #corpo {
                float: left;
                width:400px;
                background-color:#CCCCCC;
            }
            #footer {
                width:100%;
                height:90px;
                background-color: #E4E4E4;
                clear:both;
            }
        </style>
    </head>
    <body>
        <div id="contenitore">
            <div id="header"><br/>Header</div>
            <div id="menu">
                <br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu<br/>menu
            </div>            
            <div id="corpo">
                <br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo
                <br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo
                <br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo<br/>corpo
            </div>
            <div id="footer"><br/>&copy;Footer</div>
        </div>
    </body>
</html>
 

recordis

Nuovo Utente
27 Feb 2012
15
0
0
Io ho avuto quasi lo stesso problema... Ho creato un blog a mano in php e volevo fare in modo che nella pagina principale mi uscissero soltanto 4 righe (nel tuo caso soltanto una).
Questo è il codice php utilizzato:
PHP:
$numero_caratteri = 450;
$stringa_in_input = $array[2];
if(strlen(trim($stringa_in_input))>$numero_caratteri)
{
    $testo = substr($stringa_in_input,0,strpos($stringa_in_input,' ',$numero_caratteri)).'...';
} else
{$testo = $stringa_in_input; }
echo "$testo";
In pratica decidi quanti caratteri vengono presentati (nel mio caso 450, ma per te dovrebbero essere molti meno) e decidere per quali stringhe applicare questa limitazione (nel mio caso $array[2]).
Poi per il resto puoi intuire facilmente il funzionamento!