font-weight是不一致的？

Question

EDIT: I'm really sorry I think I made a mistake. Now it is working as intended. The problem occured when I used div instead of span. I thought I changed and updated code, but apparently I didn't :(

I am new to HTML5/CSS and just getting into it. Today I ran into a problem concerning font-weight (I am using a web font). My PHP code looked like this:

echo '<p><strong>'.$name$.'</strong>, You made a reservation at <strong>'.$date.'</strong></p>'

and I have set CSS to (after CSS reset):

h1, p, input, table {
    font-family: "Noto Sans KR", serif;
    font-weight: 300;
}

p {
    font-size: 12pt;
    line-height: 180%;
}

strong {
    font-weight: 500;
    white-space: nowrap;
}

Then everything was right. The texts inside the strong tag looked bold. Then I tried to apply ellipsis in $name, so I changed PHP code to:

echo '<p><span class="inform-name ellipsis"><strong>'.$name.'</strong></span>, You made a reservation at <strong>'.$date.'</strong></p>'

and set CSS to:

.inform-name {
    display: inline-block;
    max-width: 18em;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Then suddenly texts inside the strong tag does not look bold anymore. But strong tag is still applied. When I change font-weight to something like 800, text looks bold again, but other texts in strong (outside of p) looks even more thicker.

Does putting a span tag inside a p tag change something? I cannot understand what's happening here, and I tried searching but I couldn't find anything about this problem. Does anyone know why it's happening and how to fix it? Any help would be really appreciated.

Answer 1

So, i'm not quite sure if this is what you're looking, but here is a solution that might help you with your problem

First I declared the two variables $name and $date

Then I removed the span tag.

This is the code:

PHP:

$name = 'John Johnson';
$date = '09-09-09';

echo '<p class="inform-name ellipsis"><strong>'.$name.'</strong>, You made a reservation at <strong>'.$date.'</strong></p>';

?>

CSS:

<style>
    .inform-name {
    display: inline-block;
    max-width: 18em;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    h1, p, input, table {
    font-family: "Noto Sans KR", serif;
    font-weight: 300;
}

p {
    font-size: 12pt;
    line-height: 180%;
}

</style>

And this is what I get from the code: