how to make text with quotations justify? [closed]


Tags: html,css,text-justify

Problem :

I want to to justify text with quotations to be as follow:

 ‘‘  text text text text text text text text text text text text text text 

     text text text text text text text text text text text text text text  

     text text text text text text text text text text text text  ”

notice that all the lines are justified at the same level from the upper quotations, also the quotations should have different color and size than the text, so how I can do that with html & css ?



Solution :

If you want to style the quotation marks differently from the rest of the text, your best bet is to mark them up separately. Better yet if you do this with ::before and ::after instead, and contain the text in a blockquote.

If you do this with generated content, and you don't float or position the ::before and ::after pseudo-elements, outdent the text using a negative text-indent by the amount needed to offset the opening quotes from the rest of the text, and add left padding to compensate for the outdentation.

How you implement this in HTML and CSS precisely depends on what you currently have, but you can easily accomplish this with just a simple blockquote and everything else done in CSS.


    CSS Howto..

    How to align content of a div to the bottom?

    How to use CSS calc according to a certain amount of li's?

    How to prevent divs from overlapping?

    How to adjust toaster popup width

    How to put all css files in one file and all javascript files in one file

    How to markup an obscure data table layout for screen readers?

    How to have video faded when paused - HTML

    How to unbind element then allow that element to bind again

    How do I display image flush with other images after a clear?

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    How to click an element by innerthtml using CSS selectors in Selenium

    HTML - How to do a square plain button while using jQuery Mobile css [closed]

    How to work with gradients in CSS / list of online CSS gradient generators [closed]

    How to gracefully override the old css with a new css by jQuery?

    How to create Text Overlays in CSS?

    How to overlap divs using CSS?

    How to make one list-item in menu higher than the others with CSS?

    CSS - HTML how to make the anchor image go to a specific spot

    How to vertically center text span in fixed position div?

    How can i Change the DOt in a JavaFx RadioButton?

    How to get a reference to id=“xxx.yyy” in CSS?

    How to fix smooth text in IE?

    CSS: How to clear line-through for an element in a table row?

    How to Access local CSS file from within Alfresco Javascript?

    how to wrap form elements within the div tag(with background-color) using twitter bootstrap and CSS

    how to make css hover just only in a bullet area

    How can I center just one element within a container?

    How to spin an image horizontally with CSS

    Polymer 1.0 how can I style a paper-input:disabled?

    How can I get the font size of an element as it was set by css