使句子中间的文本加粗

Question

如何将整个句子中的单个单词加粗？

Hello my name is stackoverflow

如果我尝试使用<b> stackoverflow </b>

这个词转到下一行。 我还能尝试什么？

 <span>Hello my name is <b> stackoverflow </b></span> <div>Hello my name is <b> stackoverflow </b></div> <p>Hello my name is <b> stackoverflow </b></p> Hello my name is <b> stackoverflow </b>

编辑：

    <main className='content'>
    <img src={poly} alt="charts" className="charts" />
    <div className="heading">
    What's the topic?
    </div>
    This is called <strong>underfitting</strong>underfitting. A polynomial of degree 4 approximates 
      <div className="popup">
  <Popup/> 
  </div >
  <div className="regressionSetup">
    <RegressionItemsContainer/>
    </div>
      </main>

.content{
    padding-left: 260px;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.popup{
    padding-bottom: 20px;
}

.charts{
    align-self: center;
    height: 350px;
    width: 800px;
}

.heading{
    font-size: 25px;

}

即使使用 <strong> 标签，粗体字也会转到下一行。 我已经为页面添加了剩余的 css 代码。 可能是什么问题？

Answer 1

您可以使用<strong>标签或用<span class='bold'>和在 css 集中将要加粗的单词括起来：

.bold {
font-weight: bold;
}

Answer 2

您的粗体文本将换行，因为主容器.content是display: flex和flex-direction: column ，这会将每个新组放在前一个组之下。

为了防止粗体文本进入下一行，请将整个句子放入其自己的某种标签中，例如跨度。

<span>This is called <strong>underfitting</strong>. A polynomial of degree 4 approximates</span>