使用 CSS 和 javascript 制作一些具有不同样式的单词的段落的正确方法是什么?

Question

我有一个段落，里面有几行很长的文本。我需要对某些单词应用不同的样式。在不创建太多标签的情况下执行此操作的正确方法是什么？

使用反应国际格式的消息时怎么样？

<div className="main"> 
  Select the Gear icon, and then choose Users > Manage users
</div>
.main {
  font-size:14px;
}

我想将样式应用于Gear、Users和Manage users。

Answer 1

您可以使用其中一个

内置标签来实现此目的。

• <b> - 粗体文本
• <strong> - 重要文本
• <i> - 斜体文本
• <em> - 强调文本
• <mark> - 标记的文本
• <small> - 小文本
• <del> - 删除的文本
• <ins> - 插入的文本
• <sub> - 下标文本
• <sup> - 上标文本

.main {
  font-size:14px;
}

<div className="main"> 
  Select the <b>Gear</b> icon, and then choose <b><i>Users</i></b> > <em><ins><sub>Manage users</sub></ins></em>
</div>

或者，您可以使用 span 标签在文本中创建内联元素，然后您可以根据需要设置它们的样式。

.main {
  font-size:14px;
}
#gear {
  font-size: 1.1rem;
  color: red;
  font-weight: bold;
}
#users {
  font-size: 1.3rem;
  color: blue;
  text-decoration: underline;
}
#manage-users {
  font-size: 0.9rem;
  color: gray;
  text-decoration: overline;
}

<div className="main"> 
 Select the <span id="gear">Gear</span> icon, and then choose <span id="users">Users</span> > <span id="manage-users">Manage users</span>
</div>

更新

下面的代码是一个示例，当您使用 react-intl FormattedMessage 时如何以不同的方式设置每个单词的样式。堆栈闪电战链接。

render() {
    const style = {
      color: 'red',
      fontWeight: 'bold'
    }
    return (
      <div>
        <p>
          <FormattedMessage
              id="userHint"
              defaultMessage={`Select the {gear} icon, and then choose {users} > {manageUsers}`}
              values={{
                gear: <b>Gear</b>, 
                users: <i>Users</i>, 
                manageUsers: <span style={style}>Manage users</span>
              }}
          />
        </p>
      </div>
    );
  }