React中使用CSS设置段落内特定句子样式且不破坏段落结构

所有异常的根源是你给段落<p>标签设置了display: flex属性：flex布局下，容器的所有直接子节点（包括纯文本节点、<span>、<strong>这类行内元素）都会被识别为独立flex项，按flex规则排列，直接导致行内内容和段落其余文本分离，同时::first-line这类仅对块级流内容生效的伪元素会完全失效。
另外你的现有CSS存在几处语法错误，会导致样式不生效：

• font-weight: 800px：font-weight接受无单位的字重数值（100-900）或关键字，加px单位属于无效值
• .lol__WhoWeServe-heading > p选择器下的font: 16px：font是简写属性，仅写16px属于无效语法，单独设置字号需要用font-size: 16px
• .lol__WhoWeServe-header类下重复写了两次display属性，后写的display: inline-block会覆盖前写的flex属性，前面的flex相关属性会全部失效。

1. 修复基础CSS #

首先修正段落样式，删除段落上不必要的flex布局，同时修正语法错误：

.lol__WhoWeServe-header {
  /* 删掉重复的display: flex，保留实际需要的布局值即可 */
  display: inline-block;
  margin-left: 2rem;
  padding-left: 0rem;
  padding-top: 1rem;
}

.lol__WhoWeServe-heading h1 {
  font-family: var(--font-family);
  font-weight: 800; /* 删掉px单位 */
  font-size: 24px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  color: black;
}

.lol__WhoWeServe-heading p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  /* 删掉display: flex，段落文本用默认文档流即可 */
  line-height: 30px;
  text-indent: 50px;
  margin-left: 1rem;
  padding-bottom: 2rem;
  color: #525252;
}

/* 不需要给整个段落加粗的话可以删掉这段规则，需要保留就修正语法 */
.lol__WhoWeServe-heading > p {
  font-weight: 800;
  font-size: 16px; /* 修正无效的font简写 */
  color: black;
}

2. 实现目标句子加粗，不破坏段落结构 #

修复CSS后，直接用<strong>或<span>这类行内元素包裹需要加粗的句子即可，行内元素不会脱离文本流，不会出现内容分离的问题，React中写法如下（以加粗第一句为例）：

<p>
  <strong>We are passionate for the local church.</strong> Our mission is to come
  alongside the local church to help them empower, equip, and release
  more of God’s people to do the work of the ministry.
</p>

如果需要自定义高亮样式，给行内标签加类名即可：

<p>
  <span className="text-highlight">We are passionate for the local church.</span> Our mission is to come
  alongside the local church to help them empower, equip, and release
  more of God’s people to do the work of the ministry.
</p>

.text-highlight {
  font-weight: 700;
  color: #000;
  /* 可按需添加其他样式，比如高亮背景、下划线等 */
}

• 固定静态内容：直接用<span>/<strong>等行内元素包裹目标内容，添加类名写自定义样式即可。注意不要用<h2>/<div>这类默认块级元素包裹段落内文本，块级元素默认独占一行，必然导致内容分离。
• 选中段落第一行：使用::first-line伪元素，该伪元素仅对块级容器（默认文档流的p、div等）生效，容器设置为flex/grid布局时会失效，参考写法：

  .lol__WhoWeServe-heading p::first-line {
    font-weight: 700;
  }
  

• 选中段落首字符：使用::first-letter伪元素，生效规则和::first-line一致。
• 动态内容匹配关键词：如果文本是接口返回、用户输入的动态内容，可通过正则匹配目标关键词，替换为带样式的行内标签后渲染，简单实现示例：

  // 以动态高亮"local church"关键词为例
  const originText = "We are passionate for the local church. Our mission is to come alongside the local church to help them empower, equip, and release more of God’s people to do the work of the ministry."
  const keyword = "local church"
  const highlighted = originText.split(keyword).reduce((acc, item, index, arr) => {
    index !== arr.length -1 
      ? acc.push(item, <span className="text-highlight" key={index}>{keyword}</span>)
      : acc.push(item)
    return acc
  }, [])
  
  // 渲染
  <p>{highlighted}</p>
  

  这种写法直接生成React节点，不需要用dangerouslySetInnerHTML，可以避免XSS风险。

内容的提问来源于stack exchange，提问作者Jeremy Martinez