Как правильно создать абзац с несколькими словами, имеющими разные стили, используя CSS и javascript? - PullRequest
Новая
       33

Как правильно создать абзац с несколькими словами, имеющими разные стили, используя CSS и javascript?

0 голосов
/ 24 апреля 2019

У меня есть параграф с несколькими длинными строками.Мне нужно сделать несколько слов в другом стиле.Как правильно сделать это, не создавая слишком много тегов?

Как насчет использования сообщения формата response-intl? 

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


.main {
font-size:14px;
}

Я хочу сделать слова Gear, Users и Manageпользователи, другой стиль.

1 Ответ

2 голосов
/ 25 апреля 2019

Для этого можно использовать один из встроенных тегов.

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