CSS for quotations

Question

I am looking for a solution to improve quotations formatting in e-books. In the e-books I use quotations, each of them has a content and a source. Here's 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>

Right now I use 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;
}

The result looks this way:

I would like to restrict the line break within the quotation source, either to follow right behind the content (if the source text is short), or make a line break and put the quotation source at new line (in case source text is long).

When I use:

white-space: nowrap;

attribute for the quotation source, the source is placed at the next line, but the line before is too sparse:

In such case I would like to achieve this:

I would like to use same HTML and CSS for all quotations as I never know the size of the display of the e-reader device. Can you please advise if there is a solution with HTML and CSS?

When I removed text-align: justify; the quotation content does no look well. The quotation content needs to be aligned. — KarelHusa, Dec 30 '16 at 11:34
I don't think there is a way to achieve what you want with just pure css. Perhaps the best solution is to just always have the source on a new line regardless of length (use display:block) — Paul Thomas, Dec 30 '16 at 11:42
Is there a reason why you're using p/span elements with classes instead of blockquote/cite or q/cite elements? — BoltClock, Dec 30 '16 at 11:47
I do not need to stay with p/span, it's just the best I was able to achieve so far. — KarelHusa, Dec 30 '16 at 11:51
Although there may be a solution involving some combination of `align-text-last`, `::after` pseudo-elements, invisible runs of spaces, non-breaking spaces, or even soft hyphens, I myself cannot see how to combine them to get the effect you want. Therefore, I will go out on a limb and say this is impossible in pure CSS. — , Dec 30 '16 at 12:44
As @torazaburo mentioned above, it is possible to do this with pseudo-elements, however, it may involve a ton of work if you have a lot of quotes. — , Dec 30 '16 at 13:36

Jasper de Jager · Accepted Answer · 2016-12-30T13:54:26.310

4

What about float: right; for the .quotsource

The source will be aligned to the right but the space is utilized.

.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>

edited Dec 30 '16 at 13:54

answered Dec 30 '16 at 13:10

Jasper de Jager

116
5

Thanks, I like your idea. It utilizes the space and looks good as well. Thanks all others for your contribution, I appreciate that. – KarelHusa Jan 02 '17 at 09:03
The only issue I could see is that the quote source floated within the following paragraph. I needed the following paragraph to start bellow the source of quotation, so I added clear: right; to the next paragraph style. – KarelHusa Jan 04 '17 at 10:34
@KarelHusa In that case you need to [clear the floating space](https://stackoverflow.com/a/12871734/3157038). For example with `.quotation::after { content: ''; clear: both; display: block; }` – luukvhoudt Apr 07 '22 at 09:38

score 0 · Answer 2 · 2016-12-30T14:57:49.387

I am able to justify the text while keeping the last-line looking decent.

I am not able to get the source/reference to be on the last line of the paragraph if the space permits.

This is what I have so far.

.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>

But I don't think this solves the basic problem, that when the source is moved to the next line, the line above (the last line of the text) is justified, which is what he doesn't want. — , Dec 30 '16 at 13:46
@torazaburo I completely agree, that's still a major issue. I am trying to figure out how to do that now. — , Dec 30 '16 at 13:55

CSS for quotations

2 Answers2