如何为 <span> 中的第一个字母制作边框半径并对齐答案

【问题标题】：How to make border radius for first letter in <span> and align it如何为 <span> 中的第一个字母制作边框半径并对齐
【发布时间】：2024-01-19 04:04:01
【问题描述】：

我有 3 个带有“lorem ipsum”文本的内联块。
它们有标题和内容。
标题中的第一个字母，使用::first-letter，具有不同的颜色背景和边框半径。
但我无法正确对齐所有首字母，所以我为每个字母制定了“个人”padding 规则，如下所示：

.info.red .first::first-letter {
    background-color: #f17c72;
    padding: 0 18px 0 18px;

} 

.info.gray .first::first-letter {
    background-color: #aaaeb8;
    padding: 0 15px 0 15px;

} 

.info.blue .first::first-letter {
    background-color: #33516b;
    padding: 0 20px 0 20px;
}

我可以更轻松地设置 span 的第一个字母的位置吗？
第二个问题是关于如何使文本接近具有相同边距的第一个字母（参见演示底部的图片）？
Plnkr

上的两个问题的演示

【问题讨论】：

您可以尝试将第一个字母浮动到左侧并使用边距对齐它，请查看plnkr.co/edit/mvBTAlWWmjJkKVsJ1P99?p=preview。尝试将窗口扩大到足够大以看到它正确对齐，当然当窗口宽度较小时，文本会被换行，看起来不太好。
@KingKing，太棒了，非常感谢！你能就我的边界半径问题提出一些建议吗？
对不起，我不太明白你的边界半径问题。
@KingKing 抱歉，现在看来一切正常。打扰了

标签： position alignment padding css

【解决方案1】：

您不能显示块第一个字母，因此每个字母的大小不同，因为每个字母的大小不同。不幸的是，您唯一的选择是将每个字母包装在一个可以显示的跨度中：block 并为

【讨论】：

我只是不知道如何以其他方式实现这一目标。你能给我看一个其他解决方案的演示吗？

【解决方案2】：

在这里，对您的代码进行了一些处理，它似乎工作得很好，如果您将它们放在浮动左侧，每个第一个字母将具有相同的宽度，并且第一行的文本将浮动在字母的左侧.无需为每个人定制填充。

.info .first::first-letter { 边界半径：100%；字体大小：50px；颜色：#f4f2f0；向左飘浮; 边距：-10px 5px 0 0；宽度：60px；高度：60px；文本对齐：居中； } .info 跨度 { 字体粗细：粗体；显示：块；明确：两者；边距底部：20px； } .info.red .first::first-letter { 背景颜色：#f17c72； } .info.gray .first::first-letter { 背景颜色：#aaaeb8； } .info.blue .first::first-letter { 背景颜色：#33516b； }

【讨论】：