我有一个段落,有几行长文。我需要把一些单词做成不同的风格。在不创建太多标签的情况下,正确的方法是什么?
当使用react-intl格式的消息时呢?
<div className="main">
Select the Gear icon, and then choose Users > Manage users
</div>
.main {
font-size:14px;
}
我想让词齿轮,用户和管理用户,不同的风格。
发布于 2019-04-25 06:32:52
您可以使用其中一个内置标记来实现这一点。
<b>
-粗体text<strong>
-重要的text<i>
-斜体text<em>
-强调的text<mark>
-标记的text<small>
-小型text<del>
-删除的text<ins>
-插入的text<sub>
-下标text<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 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>
);
}
https://stackoverflow.com/questions/55837285
复制相似问题