我正在创建一个使用普通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: " "
}
任何人都可以帮助确定电子书中可能需要这么做的原因吗?我不想在每个段落的末尾标记一个无用的空间来使这个工作。提前致谢。
我会避免在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>