HTML 和 CSS 文本换行，某些元素的样式与其他元素不同

Question

我想要一个固定宽度的容器，标签需要有不同的样式，但要包裹在容器内。有什么想法吗？

div {
  width: 200px;
  background-color: rgba(0,0,0,0.6);
  margin: 10px;
  padding: 10px;
}
p {
  margin: 0px;
  color: white;
  font-family: sans-serif;
  font-weight: 100;
}
p:nth-child(1) {
  font-weight: 600;  
}

<div>
  <p>This Text in BOLD.</p>
  <p>And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>
<div>
  <p>This Text in BOLD. And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>

Answer 1

div {
  width: 200px;
  background-color: rgba(0,0,0,0.6);
  margin: 10px;
  padding: 10px;
}
p{
  margin: 0px;
  color: white;
  font-family: sans-serif;
  font-weight: 100;      
}
span {
  font-weight: 600;
}

<div>
  <p><span>This Text in BOLD.</span> And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>