CSS - Avvolgere il testo lungo l'angolo

Question

Sto cercando di ottenere il testo per avvolgere lungo un angolo. Questo illustra quello che sto cercando di fare meglio di quanto posso descriverlo:

http://bdub.ca/angle.png http://bdub.ca/angle.png

ho trovato una soluzione here ma utilizza un diavolo di un sacco di div flottate vuoti per creare l'effetto. Dovrò farlo un po 'di volte su una pagina, quindi sarebbe meglio avere una soluzione più leggera. JavaScript va bene se è qualcosa che posso semplicemente eseguire sul caricamento della pagina per risparmiare il DOM da un sovraccarico di elementi aggiuntivi.

Il mio brainstorming per una soluzione JS è arrivato al punto di capire come avvolgere ogni linea in un intervallo e impostare i margini di sinistra degli span successivamente più grandi. L'avvertenza è che il testo è un paragrafo che si avvolge automaticamente per adattarsi al contenitore - sfortunatamente non posso chiedere al mio cliente di inserire interruzioni di riga da Wordpress - così per avvolgere ogni riga in un intervallo implicherebbe in qualche modo la rilevazione delle interruzioni di riga automatiche usando javascript.

Qualche suggerimento?

Answer 1

È molto difficile che non sia possibile legittimamente (standard w3c, dimensioni e privacy della risoluzione dello schermo del monitor) rilevare la larghezza effettiva dei caratteri. È possibile impostare la dimensione del carattere su una larghezza specifica e inserire un'interruzione della linea quando si avvicina alla larghezza. (nel monitor b4)

quindi css: .paraIncrement {font-size: 12pt; }

Sono un po 'arrugginito con javascript quindi cerchiamo di psudo-codice di questo:

outputstr[] = array(); 
int index = 0; 
int startmax = 80; 
int innerCount = 0; 
for (int i = 0; paragraph.length; i++) { 
    outputstr[index] += paragraph[i]; 
    innercount++; 
    if (innercount == startmax) { 
     startmax -= 5; // how much you want the indent to shrink progressively. 
     innercount = 0; 
     index++; 
    } 
} 
for (int i = 0; i < output.length(); i++) { 
    echo '<span style="margin-left: '+(indentValue*i)+';">'+output[i]+'</span>'; 
} 

Questa sezione si aspetta che la lunghezza massima dall'inizio per essere di 80 caratteri, decrementative da 5 ogni volta. Inoltre, se vuoi essere sicuro che non si interrompa prima, assicurati che css.overflow sia impostato su hidden/visible.

Answer 2

Avere un'immagine vuota (come i passaggi frastagliati) che si desidera in linea a sinistra del paragrafo dovrebbe farlo.