html – 引用的CSS

我正在寻找一种解决方案,以改善电子书中的报价格式.在电子书中我使用引文,每个都有内容和来源.这是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;
}

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

现在我使用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的解决方案？

最佳答案

怎么样漂浮：对;对于.quotsource

源将与右侧对齐,但使用空间.

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

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

原文地址：https://www.jb51.cc/html/425560.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。