CSS for fiction ebook

Question

나는이 책의 챕터에 대한 소스 파일로 일반 html을 사용하여 소설 전자 책을 만들고있다. 가능한 바닐라로 html을 유지하고 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

은 내가 hr와 의사 요소에 visibility: visible 대 hidden 조합을 피할 것이다 : 당신은 단순히 수평 라인 자체의 디스플레이를 피하기 위해 hr에 border: none;을 적용 할 수 있습니다. 이것은 다른 문제에 도움이 될 수도 있습니다.

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>