引用的CSS样式设置

Question

引用的CSS样式设置

5

我希望找到一种解决方案，以改进电子书中引用的格式。在我的电子书中，每个引用都有内容和来源。以下是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的解决方案？

- KarelHusa

只需删除 text-align: justify; CSS。 - Super User

2

我认为仅使用纯CSS无法实现您想要的效果。也许最好的解决方案是始终将源代码放在新行上，而不考虑其长度（使用display:block）。 - Paul Thomas

1

你使用带类的p/span元素而不是blockquote/cite或q/cite元素，有什么原因吗？ - BoltClock

2

虽然可能有一些解决方案，涉及到align-text-last、::after伪元素、不可见的空格、不间断空格，甚至是软连字符的组合，但我自己无法看出如何将它们结合起来以获得您想要的效果。因此，我会冒险说，在纯CSS中这是不可能的。 - user663031

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - user7234396

显示剩余2条评论

2个回答

0

我能够在保持末行整洁的同时调整文本对齐方式。

如果空间允许，我无法使源/参考信息位于段落的最后一行。

这是我目前的进展。

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

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

- user7234396

2

但我认为这并没有解决基本问题，即当源代码移到下一行时，上一行（文本的最后一行）被调整对齐，这正是他不想要的。 - user663031

1

@torazaburo 我完全同意，这仍然是一个重大问题。我正在努力想办法解决它。 - user7234396

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jasper de Jager · Accepted Answer

float: right;用于.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;
}

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