如何将不同的样式添加到 HTML 中一行的不同部分并将所有内容打印在一起？

Question

我想在 HTML 中的一行的不同部分添加不同的样式，然后一起打印该行。想象一下我有下一行：

你好，我叫博格丹，住在西班牙。

我设法为线条添加了不同的样式，但我无法将所有部分放在一起，并对每个部分应用不同的样式。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    <style>
    div{
    }.bold{  font-weight: bold;
    }
     .normal{  font-weight: normal;
    }
    .italic{
        font-style: italic;
    }
     .left{
       text-align:left;
     float:left;
    }
     .container{
     letter-spacing:-1px;
     width: 372px;
      font-family: Monaco,monospace;
     font-size:19px;}
     .center{
       text-align:center;
    }
     .underline{
      text-decoration: underline;
    }
     .doubleFont{font-size:38px;}
    
    </style>
    </head>
    <body>
  <div class = container>   
   <div class=>
    <div class=>Hello my name is Bogdan</div>
   </div>
   <div class="underline bold">
    <div class=>and i live </div>
   </div>
   <div class="bold">
    <div class=>in Spain</div>
   </div>
   <br>
  </div>
    </body>
</html>

Answer 1

用这样的 span 替换 div：

<span>Hello my name is Bogdan</span>
<span class="underline bold">and i live </span>
<span class="bold">in Spain</span>

Spans 是行内元素，换行。除非另有设置，否则 divs 总是在下一行。还可以考虑在 .container class.

上设置更大的宽度

如何将不同的样式添加到 HTML 中一行的不同部分并将所有内容打印在一起？

How can i add differents styles to differents part of a line in HTML and print everything together?

italic