user45146 user45146 - 2 months ago 8
PHP Question

font-weight is inconsistent?

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

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:

enter image description here