使用CSS和javascript用一些具有不同樣式的單詞制作段落的正確方法是什么

Question

我有一段，有幾行長的文字。 我需要把一些詞變成不同的風格。 不創建太多標簽的正確方法是什么？

使用react-intl格式的消息怎么樣？

<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時，如何為每個單詞設置不同的樣式。 StackBlitz鏈接。

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