使句子中间的文本加粗答案

【问题标题】：make text bold in the middle of the sentence使句子中间的文本加粗
【发布时间】：2021-03-21 00:29:55
【问题描述】：

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

Hello my name is stackoverflow

如果我尝试使用 stackoverflow 

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

<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;

}

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

【问题讨论】：

你可以在你的css中使用font-weight，但是你必须用class或id将你想要加粗的单词包裹在一个span中。不能保证它不会进入下一行。您可以减小字体大小或调整字距或增加宽度
 并不一定意味着文本会是粗体 developer.mozilla.org/en-US/docs/Web/HTML/Element/b
你能举一个标签的例子，让文本转到下一行吗？如果发生这种情况，您的错误很可能在代码中的其他地方。
试试上面的sn-p。什么在那里不起作用？请向我们展示您的代码示例，以便我们在此处尝试和重现。
@Ivan86 与一起工作，否则它将进入下一行，如 qs 所示

标签： javascript html css reactjs

【解决方案1】：

您可以使用 标记或用 和在css 集中将要加粗的单词括起来：

.bold {
font-weight: bold;
}

【讨论】：

strong 添加了可能不是有意的语义。 developer.mozilla.org/en-US/docs/Web/HTML/Element/b developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
确实如此，但它也是新的和首选的方式。语义也没有缺点。基本上做同样的事情是有好处的。
那是一个“取决于”主题，但我同意：语义>没有语义

【解决方案2】：

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

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

This is called underfitting. A polynomial of degree 4 approximates

【讨论】：