Web design and hosting, database, cloud and social media solutions that deliver real business results
  • Business Solutions
    • Robotic Process Automation
    • Bespoke Software
    • Database Services
      • Data Integration
      • Datawarehouse Services
      • Power BI
    • Web Services
      • Logo Design
      • Payment Gateways
      • Web Site Optimisation
      • Web Site Security
      • Technical Tools
    • Cloud Services
      • Amazon Web Services
      • Google Cloud Services
      • Microsoft Azure
    • Microsoft Office
    • Social Media Services
  • Academy
    • Our Test Environment
    • Learning Databases
      • The Basics
      • Get Open Query
      • SQL Server Data
      • SQL Server Maintenance
      • Using SQL Server Dates
      • Using SQL Server Functions
      • Using SQL Server Pivot-Unpivot
      • Technical Tools
    • Learning Web Design
      • Building Ousia Content Management System
      • Using ASP-NET
      • Using CSS
      • Using JavaScript
    • Learning Cloud and IT Services
      • Task Scheduler Error 2147943645
      • Requesting SSL and Generation of PFX file in OpenSSL Simple Steps
    • Using Social Media
      • Asking for a Google Review
      • Changing a Facebook account from personal to business
      • Choosing where to focus Social Media effort
      • Social Media Image Sizes
      • Using Meta Data to set Social Media Images
  • About
    • Blog
      • Building an entry level gaming machine
      • Google Core Update Jan 2020
      • Hot Chilli Internet Closure
      • How To Choose Content For Your Website Adverts Leaflets
      • Preventing Online Scam
      • Skimmers of the gig economy
      • The most annoying things about websites on the Internet
      • Top 5 websites for free Vector Graphics
    • Portfolio
    • Team
      • Adrian Anandan
      • Ali Al Amine
      • Ayse Hur
      • Chester Copperpot
      • Fernando Ancona Camara
      • Gavin Clayton
      • Sai Gangu
      • Suneel Kumar
      • Surya Mukkamala
      • Trevor Momanyi

Styling blockquote with multiline content

Styling blockquote with multiline content

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.

This led us to spend a morning writing the code below which transforms div and paragraph into inline elements.

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.

In our CSS we have also used padding on the quotations to give it a better spacing.

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>

Author

Gavin Clayton
Gavin Clayton
I formed Claytabase in 2010 as a way of carrying on my work with SQL Server and ASP.NET. This has culminated in the Ousia Content Management System being taken from concept to one of the quickest CMS's on the market.

Was this helpful?

Please note, this commenting system is still in final testing.
Copyright Claytabase Ltd 2021, registered in England and Wales 08985867

Site Links

RSS Login ContactCookie PolicySitemap

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.co.ukGround Floor, Building 1000, Lakeside North Harbour, Western Road, Portsmouth, Hampshire, United Kingdom, PO6 3EZ

Partnered With

Partners
The settings on this site are set to allow all cookies. These can be changed on our Cookie Policy & Settings page.
By continuing to use this site you agree to the use of cookies.
Ousia Logo
Ousia CMS Loader