Question

我正在创建一个使用普通html作为本书章节源文件的小说电子书。我想尽可能保持html为vanilla并使用CSS进行格式化。本书的大部分内容只需要缩进段落后面的任何段落，并且每个<hr />标记都应显示为场景中断，例如3 *居中对齐。

这在JSFiddle和chrome中都可以正常工作。

p {
  margin: 0rem;
  text-indent: 0rem;
}

p + p {
  text-indent: 1.5rem;
}

hr {
  visibility: hidden;
  text-align: center;
  overflow: visible;
  margin-top: 2em;
  margin-bottom: 2em;
}

hr::after {
  visibility: visible;
  content: "* * *";
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>

但是当我将其复制到亚马逊电子书预览应用程序时，我需要这个额外冗余的CSS来显示***？

p::after { 
    content: " "
}

任何人都可以帮助确定电子书中可能需要这么做的原因吗？我不想在每个段落的末尾标记一个无用的空间来使这个工作。提前谢谢。

Answer 1

我会避免visibility: visible中的hidden与hr组合及其伪元素：您只需将border: none;应用于hr即可避免水平线本身的显示。这也可能有助于解决您的其他问题。

p {
  margin: 0rem;
  text-indent: 0rem;
}

p + p {
  text-indent: 1.5rem;
}

hr {
  text-align: center;
  border: none;
  margin-top: 2em;
  margin-bottom: 2em;
}

hr::after {
  content: "* * *";
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>

小说电子书的CSS

1 个答案: