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?

Answer 1

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>