2012-03-06 14 views
12

C'è qualche plugin jQuery o trucco CSS disponibile che mi permette di fare questo?Come convertire il testo in overflow di un div in un altro div

+---------------+ 
    |This is a  | 
    |very long  | 
    |text in this | 
    |div which will | 
    |overflow and | 
    +---------------+   

         +---------------+ 
         |spill into  | 
         |this div.  | 
         |    | 
         |    | 
         |    | 
         +---------------+ 

MODIFICA: questi 2 div possono essere posizionati in qualsiasi punto della pagina e i testi devono risiedere all'interno dei div.

+0

+1 domanda interessante – Hubro

+0

Può esistere lo stesso testo in entrambi i div (p isticamente, non visivamente)? – MMM

risposta

3

questo è lontano dalla soluzione migliore, ma dalla parte superiore della mia testa mi piacerebbe fare in questo modo-ish:

http://jsfiddle.net/U79Kg/

Questo potrebbe non essere quello che stai cercando, ma si spera che un puntatore nella giusta direzione!

+0

Sì. Probabilmente ci potrebbe essere un modo più elegante, ma questo è il tipo di soluzione che sto cercando. – intellidiot

0

È possibile utilizzare qualcosa come column-count (solo CSS3). Non sono sicuro se è possibile posizionare la seconda colonna in un posto diverso.

div{ 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count: 2; 
} 

Questo plugin jQuery è progettato per dividere una tekst in più sezioni (colonne, quello che volete chiamarli): http://welcome.totheinter.net/columnizer-jquery-plugin/

+0

Ma il conteggio delle colonne non caga come OP vuole – sandeep

+0

Questo non riguarda le colonne adiacenti in realtà. I 2 div possono risiedere ovunque nel dom. – intellidiot

0

Si può fare solo con i CSS, utilizzando scatole galleggianti in questo modo: http://jsfiddle.net/W4bHQ/

+0

Nella tua demo stai effettivamente spingendo una parte del testo a sinistra e l'altra a destra. Ma la mia domanda iniziale non è quella. I testi devono vivere all'interno di questi 2 div. E questi 2 div possono risiedere ovunque nella pagina. – intellidiot

0

Ecco una soluzione basata su due presupposti:

  1. Lo stesso testo può esistere in entrambi i div
  2. 'line-height' è impostato per adattarsi alla div ben

Questa soluzione utilizza CSS e una riga di JavaScript (jQuery): http://jsfiddle.net/wzEXZ/1/

+0

Bello. Penso che intendessi $ ("# b"). ScrollTop ($ ("# a"). InnerHeight()); altrimenti devono essere alla stessa altezza. Suppongo anche che debbano ancora avere la stessa larghezza, ecc. – nafg

Problemi correlati