将背景添加到一行文本的第一个字母.怎么样？

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
}