Citazione in stile con contenuto multilinea
Citazione in stile con contenuto multilinea
Utilizzare le virgolette utilizzando CSS era qualcosa che non abbiamo utilizzato in un primo momento siccome abbiamo sempre avuto problemi nel displaying delle ultime virgolette mentre utilizzate piu' di una riga di testo
Questo ci ha portato una mattinata a scrivere il codice qui sotto che transforma div e paragrafi in elementi in linea
Una volta risolto questo problema, gli elementi filgi si sarebbero scontrati. Per ovviare a questo problema, abbiamo aggiungto una pseudoclasse di elementi con interruzioni di linea. Settando le interruzioni ad un elemento di blocco.
Nel nostro CSS abbiamo inoltre utilizzato il padding nelle virgolette per migliorare la spaziatura.
CSS
q, blockquote {quotes: "\201C" "\201D" "\2018" "\2019";}q p, blockquote p,q div, blockquote div{display:inline;}q p:not(:last-child)::after, blockquote p:not(:last-child)::after,q div:not(:last-child)::after, blockquote div:not(:last-child)::after{content:"\a";display: block;white-space: pre;}q:before, blockquote:before {content: open-quote;font-size: 2.5em;display:inline;vertical-align: middle;font-family: monospace;}q:after, blockquote:after {content: close-quote;font-size:2.5em;display:inline;vertical-align: middle;font-family: monospace;} HTML
<blockquote>
<p>Styling blockquote using CSS was something that we didn't really use at first as we always had problems displaying the last quotation mark when using more than one line worth of text.</p>
<p>This led us to spend a morning writing the code below which transforms div and paragraph into inline elements.</p>
<p>Once we had solved this problem though, the child items would literally run up against each other. To circumvent this, we have added pseudo classes to the items with line break. By setting this line break to a block element it also looks almost seamless with the rest of our content.</p>
</blockquote>