Testo di overflow sia a destra che a sinistra

Come si concentra il testo con css in modo da far uscire sia a destra che a sinistra? Vedo domande qui che fanno testo in eccesso lasciato invece del diritto, ma voglio farlo sembrare come il testo viene ingranditaTesto di overflow sia a destra che a sinistra

<body> 
    <div class="page"> 
     SOMEHEADER 
    </div> 
</body>

.page { 
    overflow:hidden; 
    width:70%; 
    text-align:center; 
    margin:0 auto; 
    font-size:8em; 
    word-wrap:none; 
}

Ecco un fiddle con una demo di di cosa sto parlando

fonte

2012-12-24 mehulkar

Vedere questa demo: http://jsfiddle.net/QZCuY/3/ ho provato in ultima Chrome, FF e IE7-9

HTML (<div class="text"> aggiunto):

<div class="page"> 
    <div class="text"> 
     SOMEHEADER 
    </div> 
</div> 
<p> 
    How do I get the header to overflow left <u>and</u> right instead of just to the right? 
</p>

CSS (.page ha due nuove proprietà e nuove .text):

body { 
    background-color:green; 
} 
.page { 
    position:relative; 
    height:1em; 

    overflow:hidden; 
    background-color:red; 
    width:70%; 
    text-align:center; 
    margin:0 auto; 
    font-size:8em; 
    word-wrap:none; 
} 
p { 
    width:70%; 
    margin:50px auto 0; 
    text-align:center; 
    font-size:2em; 
} 

.text { 
    position:absolute; 
    right:-50%; 
    left:-50%; 
}

fonte

2012-12-24 10:54:59

Non è la soluzione più elegante, ma sembra funzionare.

HTML:

<div class="page"> 
    <div> 
     SOMEHEADER 
    </div> 
</div>

CSS:

.page > div { 
    margin: 0 -1000%; 
}

Esempio: http://jsfiddle.net/grc4/w36mX/

Questo metodo funziona allungando il div interno tale che è abbastanza larga per adattarsi completamente il suo contenuto (senza avvolgimento/traboccante). Il contenuto viene quindi centrato (text-align: center) e ritagliato a misura dal div esterno (overflow: hidden).

La parte delicata è quella di rendere il div interno più ampio per adattarsi al testo. Ogni volta che non è abbastanza largo, il testo traboccherà verso destra in modo che non sia centrato correttamente (come si vede nel jsFiddle originale).

Utilizzando negative margins, è possibile allungare l'elemento di una certa quantità sia a sinistra che a destra. Se sai che la dimensione del testo è di 400 px, ad esempio, puoi utilizzare margin: 0 -200px per garantire che il div interno sia sempre largo almeno 400 px (200 px a sinistra e 200 px a destra). Quando non conosci la dimensione esatta del testo, puoi utilizzare percentuali o un valore px molto alto.

margin: 0 -100% allunga il div del 100% della sua dimensione originale a sinistra e 100% di nuovo a destra, rendendolo 3 volte più grande del div .page. Il testo è largo circa 900px, quindi questo metodo smetterebbe di funzionare se il div .page fosse inferiore a 300px (prova a ridimensionare il tuo browser in jsFiddle con margin: 0 -100% per vedere cosa intendo).

margin: 0 -1000% allunga il div per renderlo 21 volte più grande, che di solito è sufficiente per adattarsi al testo.

fonte

2012-12-24 10:56:11 grc

+1 Soluzione davvero più semplice della mia –

Funziona alla grande. Puoi spiegare perché funziona? '-1000%' di cosa? Inoltre, '-100%' sembra funzionare allo stesso modo? – mehulkar

Ho aggiunto una spiegazione. – grc

Testo di overflow sia a destra che a sinistra

risposta

Problemi correlati