Single word with different font jumps to the next line

[Vren]

Hi,

for names in my acknowledgement I wanted to use the font I use for my title chapters.

But when I do this, the name jumps to the next line in preview and I can't detect the error or the reason why. The name in the font appears in one single line. I haven't found a solution online (or maybe I haven't typed the error correctly).

Can anybody have a look at this and tell me what I can improve/change?

I used this in my style sheet:

/* <p class="LoftygoalsregularNamen">TEXT</p> / Text mit Schriftart "Lofty Goals"*/
.LoftygoalsregularNamen {
font-family: "Loftygoalsregular";
font-weight: bold;
font-style: normal;
text-align: justify;
display: block;
text-indent: 0em;
}

I also have added a test epub file for more info.

Thank you!

[DiapDealer]

A p tag is a block-level element. There will always be a line-break at a new p tag. That's why you shouldn't nest p tags. Put the entire paragraph in one p tag and use a div or span tag to apply your css to the pieces you want.

[DiapDealer]

Whether you nest p tags or change those to divs or spans, you need to change the value of the display attribute in your .LoftygoalsregularNamen css class from "block" to "inline". That's actually the root of your problem. Spans are inline by default, p and div are block, but can be modified with the display: block|inline attribute|value

[philja]

Originally Posted by Vren

Hi,

for names in my acknowledgement I wanted to use the font I use for my title chapters.

But when I do this, the name jumps to the next line in preview and I can't detect the error or the reason why. The name in the font appears in one single line. I haven't found a solution online (or maybe I haven't typed the error correctly).

Can anybody have a look at this and tell me what I can improve/change?

I used this in my style sheet:

/* <p class="LoftygoalsregularNamen">TEXT</p> / Text mit Schriftart "Lofty Goals"*/
.LoftygoalsregularNamen {
font-family: "Loftygoalsregular";
font-weight: bold;
font-style: normal;
text-align: justify;
display: block;
text-indent: 0em;
}

I also have added a test epub file for more info.

Place your names in <span> tags as DiapDealer said and change your CSS to remove display: block; --and most of the rest isn't needed either.

It will work the way you want like this:

.LoftygoalsregularNamen {
font-family: "Loftygoalsregular";
font-weight: bold;
}

and in the code view:

<span class="LoftygoalsregularNamen">First Name</span>

[Vren]

@DiapDealer, thank you so much for the explanation, I've read this before (regarding not nesting p tags) but I forgot. Also thanks with explaining the attributes. I need to write that down an learn more about the basics! I've tested it with changing the attributes and it works, but as this is not the correct way, I've changed it to a span tag as @philja also suggested. I've also cleared it as you, philja, said/showed.

Everything is diplayed perfectly now in my manuscript.
Thanks so much for your help! <3