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)


imagevdl.jpg


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.046
150
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.046
150
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.046
150
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.449
338
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!
 
Discussioni simili
Autore Titolo Forum Risposte Data
Kerotan Div, css e testo (prime armi) HTML e CSS 35
trattorino css solo se richiama un class di un div HTML e CSS 1
P nascondere div con css inline Javascript 2
C CSS elemento tagliato fuori da div HTML e CSS 9
gandalf1959 Background image in un div con CSS non funziona HTML e CSS 4
bluettina Odio amore per i div e figlio css HTML e CSS 1
M CSS...dinamico? Altezza div variabile, ma con immagine come bordo HTML e CSS 4
Monital [DIV/CSS] evidenziare risultato array all'interno di un div PHP 0
M Centrare un DIV nel BODY (usando i CSS) HTML e CSS 1
L [CSS] Div e menu sovrapposti, attributi 'absolute', 'relative' (schema in allegato) HTML e CSS 0
B Flash & CSS: caricare pagina esterna in DIV Flash 2
N [PHP+HTML+CSS] Problema con un div HTML e CSS 4
G Css: come mettere il collegamento al div header? HTML e CSS 8
F [CSS] Problema con IE e div fixed HTML e CSS 2
MattiaBergomi [DIV e CSS] Far contenere ad un Div un immagine senza che esca dai margini HTML e CSS 9
R [css] lunghezza div dei contenuti principali HTML e CSS 2
L div nascosti via CSS Javascript 1
gladenko CSS e DIV problema di dimensionamento HTML e CSS 3
M css div w3c posso iniziare? HTML e CSS 1
L padding e mozilla (in css e div) HTML e CSS 8
grottafelix Div O Table [css] HTML e CSS 4
M cosa servono i tag div + guida sui CSS HTML e CSS 5
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
Z Slide show CSS HTML e CSS 1
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1

Discussioni simili