使用CSS和javascript制作具有不同风格的单词的段落的正确方法是什么？
使用CSS和javascript制作具有不同风格的单词的段落的正确方法是什么？
提问于 2019-04-25 03:31:59
我有一个段落，有几行长文。我需要把一些单词做成不同的风格。在不创建太多标签的情况下，正确的方法是什么？
当使用react-intl格式的消息时呢？
<div className="main">
Select the Gear icon, and then choose Users > Manage users
</div>
.main {
font-size:14px;
}我想让词齿轮，用户和管理用户，不同的风格。
回答 1
Stack Overflow用户
发布于 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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55837285
复制相关文章
相似问题