引用的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

float: right;.quotsource怎么样？

\n\n

源将向右对齐，但空间已被利用。

\n\n

\r\n

\r\n

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

\r\n

<p class="quotation" style="width: 500px">\r\n  <span class="quottext">Lorem Ipsum je demonstrativn\xc3\xad v\xc3\xbdpl\xc5\x88ov\xc3\xbd text pou\xc5\xbe\xc3\xadvan\xc3\xbd v tiska\xc5\x99sk\xc3\xa9m a kniha\xc5\x99sk\xc3\xa9m pr\xc5\xafmyslu. Lorem Ipsum je pova\xc5\xbeov\xc3\xa1no za standard v t\xc3\xa9to oblasti u\xc5\xbe od za\xc4\x8d\xc3\xa1tku 16. stolet\xc3\xad, kdy dnes nezn\xc3\xa1m\xc3\xbd tiska\xc5\x99 vzal kusy.\r\n  </span>\r\n  <span class="quotsource">(The Lorem Ipsum Manual, page 6)</span>\r\n</p>\r\n<br> <br>\r\n <p class="quotation" style="width: 300px">\r\n  <span class="quottext">Lorem Ipsum je demonstrativn\xc3\xad v\xc3\xbdpl\xc5\x88ov\xc3\xbd text pou\xc5\xbe\xc3\xadvan\xc3\xbd v tiska\xc5\x99sk\xc3\xa9m a kniha\xc5\x99sk\xc3\xa9m pr\xc5\xafmyslu. Lorem Ipsum je pova\xc5\xbeov\xc3\xa1no za standard v t\xc3\xa9to oblasti u\xc5\xbe od za\xc4\x8d\xc3\xa1tku 16. stolet\xc3\xad3\r\n  </span>\r\n  <span class="quotsource">(The Lorem Ipsum Manual, page 6)</span>\r\n</p>

\r\n

\r\n

\r\n

\n