Html 为一行文本的第一个字母添加背景。怎么用？

请看附件中的图片，如下所示：

这是我在Photoshop中轻松编出来的，是关于文件上的企业标识之类的。但是：我现在需要创建一个电子邮件签名。尽管。。我不知道如何实现句子第一个字母的正方形/矩形背景的效果

因为它不应该将文本剪切到下一行，所以我不能使用

标记

---

我希望有人能帮助我！但是，它是用于电子邮件签名的，所有CSS都必须是内联的。编辑：除此之外，你也不能使用DIV。。多谢各位

您可以使用

：第一个字母

div:first-letter {
    padding: 0 3px;
    background: #f00;
}


或者

注意：您也可以用
p
元素替换
div
，但是
：第一个字母
不起作用

（使用
p
tag）


由于要使用
span
标记执行此操作，需要将其定义为
内联块
使
：第一个字母
起作用

使用
span
标记执行此操作-

我应该在我的OP中声明，在电子邮件签名中不支持使用DIV。。有其他选择吗？@SanderSchaeffer您可以使用
p
或任何其他元素，因为它是内联的。。我只是使用：
 
我想是吧？在编写和尝试时，我也可以使用span..@SanderSchaeffer，我添加了一个带有span标记的演示，正如我所说：CSS应该是内联的。然而，你在这里写下的CSS使我能够工作，因为我自己将它内联。非常感谢！更正：以内联方式进行，但我没有使用
：第一个字母
，而是在第一个字母后设置结束符。谢谢
div:first-letter {
    padding: 2px 5px;
    background: #174D95;
    font-family: Arial;
    color: #fff;
    font-weight: bold;
    margin-right: 2px;
}

span:first-letter {
    padding: 2px 5px;
    background: #174D95;
    font-family: Arial;
    color: #fff;
    font-weight: bold;
    margin-right: 2px;
}

span {
   display:block
}