html - 为一行文本的第一个字母添加背景。如何？

Question

请看下面的附图：

这是我在 Photoshop 中轻松制作的，用于文件等上的企业标识。但是：我现在需要为电子邮件签名创建它。虽然..我不知道如何实现具有方形/矩形背景的效果 - 好吧让我们说 - 句子的第一个字母。

由于它不应该将文本切断到下一行，因此我不能使用<p>标签。

我希望有人能帮助我！但是，它用于电子邮件签名，并且所有 CSS 都必须是内联的。编辑：除此之外：您也不能使用 DIV .. 非常感谢！

Answer 1

您可以使用:first-letter

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

演示

或者更好的

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

注意：您也可以div用p元素替换，但:first-letter不适用于内联元素。

演示 2（使用p标签）

---

当您想使用span标签执行此操作时，您需要将其定义为inline-block;进行:first-letter工作。

span使用标签执行此操作 -演示

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

span {
   display:block
}