2

I have a paragraph with several long lines of texts. I need to apply a different style to some of the words. What would be the proper way to do this without creating too many tags?

How about when using a react-intl format message?

<div className="main"> 
  Select the Gear icon, and then choose Users > Manage users
</div>

.main {
  font-size:14px;
}

I want to apply styles to Gear, Users and Manage users.

mfluehr
  • 2,832
  • 2
  • 23
  • 31
Jeny
  • 71
  • 1
  • 9
  • 3
    I'd recommend wrapping each of your styled words with an `` or `` tag. I don't think there's any way around using tags. – mfluehr Apr 24 '19 at 19:43
  • 2
    Put the wrong close option since it's a duplicate of multiple examples but the first prerequisite of the site is an [MCVE](https://stackoverflow.com/help/mcve) and [attempting something](https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript) first if you're looking for dynamic javascript approach, or a simple html/css static approach like mentioned above. – Chris W. Apr 24 '19 at 19:44

1 Answers1

4

You can use one of the built-in tags to achieve this.

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

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

Or you can use the span tag to create inline elements in your text and then you can style them as you want.

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

Update

The code below is an example how to style each word differently when you use react-intl FormattedMessage. StackBlitz link.

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>
    );
  }
Csaba Farkas
  • 794
  • 7
  • 11