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.