引用的CSS

Question

我正在寻找一种解决方案，以改善电子书中的报价格式。在电子书中我使用引文，每个都有内容和来源。这是HTML＆amp; CSS：

＆＃13;

＆＃13;

public int calculateDays(Date d1, Date d2) {

    int months = 0;
    int days = 0;

    months = Months.monthsBetween(new DateTime(d1), new DateTime(d2)).getMonths();

    int endOfMonth = d1.getDate() == 31 ? 31 : 30;

    if(d1.getDate() > d2.getDate()){
        days = endOfMonth - d1.getDate() + d2.getDate();
    }else{
        days = d2.getDate() - d1.getDate();
    }
    months = months * 30;
    days = months + days;

    return days;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在我使用CSS：

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

结果看起来像这样：

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

当我使用时：

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

引用源的

属性，源位于下一行，但之前的行太稀疏了：

在这种情况下，我想实现这个目标：

我想对所有报价使用相同的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>

Answer 2

我能 证明文字，同时保持最后一行看起来不错。

如果空间允许，我无法将源/引用放在段落的最后一行。

这是我到目前为止所拥有的。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;