html - 引用的 CSS

Question

我正在寻找一种解决方案来改进电子书中的引文格式。在我使用引文的电子书中，每一个都有内容和来源。这是 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>

现在我使用 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;
}

结果看起来是这样的:

我想限制引文源中的换行符，要么紧跟在内容后面(如果源文本很短)，要么换行并将引文源放在新行(如果源文本很长)。

当我使用时:

white-space: nowrap;

引文来源属性，来源放在下一行，但前一行太稀疏了:

在这种情况下我想实现这个:

我想对所有报价使用相同的 HTML 和 CSS，因为我不知道电子阅读器设备的显示尺寸。能否请您告知是否有 HTML 和 CSS 的解决方案？

Answer 1

.quotsource 的 float: right; 怎么样

源将右对齐，但会占用空间。

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