2017-12-18 4 views
0

Ich erstelle ein fiktion eBook mit plain html als Quelldateien für die Kapitel des Buches. Ich möchte den HTML-Code so klein wie möglich halten und CSS für die Formatierung verwenden. Der Großteil des Buchs benötigt nur einen Einzug für jeden Absatz, der einem Absatz folgt, und jedes <hr />-Tag sollte als Szenenunterbrechung angezeigt werden, z. 3 * zentriertCSS für fiktion ebook

Das alles funktioniert gut in JSFiddle und in Chrom.

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>

aber wenn ich dies dem App ebook Vorschau Amazon kopieren muss ich diese zusätzliche redundante sucht CSS für die *** s erscheinen?

p::after { 
    content: " " 
} 

Kann jemand helfen zu identifizieren, warum dies im Ebook benötigt werden könnte? Ich möchte keinen nutzlosen Platz am Ende jedes Absatzes markieren müssen, um dies zu erreichen. Danke im Voraus.

+1

Hinweis: ''


keinen abschließenden Schrägstrich und nie hat verwenden oder benötigen. – Rob

+0

Vielleicht könntest du es so lassen wie es ist. Schließlich werden die Leute diesen zusätzlichen Raum nicht sehen, meinst du nicht? (Dies wird Ihnen nicht helfen, das Problem zu lösen ... aber um zu überdenken, wenn es welche gibt) – Cedric

+0

@Rob in XHTML, es tat - hr hatte einen schließenden Schrägstrich. – Cedric

Antwort

1

Ich würde die visibility: visible vs. hidden Kombination in der hr und seine Pseudo-Element vermeiden: Sie einfach border: none; auf die hr anwenden kann sich die Anzeige der horizontalen Linie zu vermeiden. Dies könnte auch bei Ihrem anderen Problem helfen.

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>

+0

Danke für den Vorschlag, funktioniert im Browser aber kindle zeigt überhaupt kein Trennzeichen mit diesem CSS. – Lilster

+0

Nur zur Information sollte ich erwähnen, das funktioniert auch OK wenn du den p :: after space Charakter fudge hinzufügst .. Also wenn ich damit lebe als ein seltsames Kindle einziges Problem werde ich deine Version benutzen, danke;) – Lilster