CSS for quotes

Question

I am looking for a solution to improve the formatting of quotes in e-books. In e-books, I use quotes, each of which has content and a source. Here's the HTML & CSS:

.quotation { display: block; text-align: justify; margin: 0.25em 1em 0.25em 1.25em; } .quottext { font-style: italic; } .quotsource { margin: 0 0 0 0.25em; } 

 <p class="quotation"> <span class="quottext">Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy textu a na jejich základě vytvořil speciální vzorovou knihu.</span> <span class="quotsource">(The Lorem Ipsum Manual, page 6)</span> </p> 

I am using CSS now:

 .quotation { display: block; text-align: justify; margin: 0.25em 1em 0.25em 1.25em; } .quottext { font-style: italic; } .quotsource { margin: 0 0 0 0.25em; } 

The result is as follows:

I would like to limit the line break in the source of the quote, either follow the content (if the source text is short), or make a line break and put the source of the quote in a new line (in the case of the source text, long).

When i use:

 white-space: nowrap; 

for the source of the quote, the source is placed on the following line, but the line before this is too sparse:

In that case, I would like to achieve this:

I would like to use the same HTML and CSS for all quotes, since I never know the display size of an e-reader. Could you advise if there is a solution with HTML and CSS?

Answer 1

How about float: right; for .quotsource

The source will be aligned to the right, but the space will be used.

 .quotation { display: block; text-align: justify; margin: 0.25em 1em 0.25em 1.25em; } .quottext { font-style: italic; } .quotsource { float: right; margin: 0 0 0 0.25em; } 

 <p class="quotation" style="width: 500px"> <span class="quottext">Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy. </span> <span class="quotsource">(The Lorem Ipsum Manual, page 6)</span> </p> <br> <br> <p class="quotation" style="width: 300px"> <span class="quottext">Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století3 </span> <span class="quotsource">(The Lorem Ipsum Manual, page 6)</span> </p> 

Answer 2

I can justify the text , while maintaining the last line.

I can not get the source / link in the last line of the paragraph, if allowed.

This is what I still have.

 .container p { width: 1200px; max-width: 90%; margin: .75em auto; text-align: justify; } .source { color: red; display: block; } 

 <div class="container"> <p> Lorem ipsum dolor sit amet, minimum rationibus honestatis vix et, vix habeo prodesset et. No eos quod clita splendide, viris deterruisset et quo. Nihil omittam invenire sit id, an novum minimum sit. Ius an zril verear impedit. Etiam commune molestie ei pri. <span class="source">(The Lorem Ipsum Manual, page 6)</span> </p> <p> Lorem ipsum dolor sit amet, in vis inani torquatos, argumentum intellegam id duo, est id sale decore. Quo clita quaestio an. Partem lobortis ullamcorper nam an, eu has dolor iriure omittam. Mea nostrum democritum at. Munere perfecto liberavisse at pri. Cibo dicta his ei, pro ne probo dolores.<span class="source">(The Lorem Ipsum Manual, page 803)</span> </p> <p> Lorem ipsum dolor sit amet, usu congue scaevola conceptam id. Mea an nostrud ornatus impedit, ut possim corpora eos, indoctum hendrerit usu no. At quaeque sadipscing quo, natum prima definiebas in mei, nec audire ornatus et. Alii tritani ex vim, magna dolores philosophia in mea. Est admodum instructior cu. Tantas alienum maiestatis ex est.<span class="source">(The Lorem Ipsum Manual, page 532)</span> </p> </div>