Question

我正在尝试使用border-radius和padding在文章中围绕每个第一段的第一个字母绘制一个圆圈，但由于字符的宽度不同，它将显示为一个椭圆而不是一个圆圈。

是否有可能使用CSS将字母的宽度和高度设置为相同的量，或者设置填充以使其与宽度匹配任何字符的高度？

我目前的代码如下：

p:first-of-type:first-letter{
  font-size: 58px;
  line-height: 1;
  float: left;
  margin-bottom: -4px;
  background-color: rgb(44, 44, 44);
  border-radius: 40px;
  padding: 0 14px;
  color: #fff;
}

Answer 1

Per @ web-tiki - :: first-letter伪元素不允许使用width属性。唯一的解决方案是使用等宽字体或使用容器作为第一个字母。它将允许为其指定一个圆圈。

在web-tiki的优秀答案的基础上，您可以调整MyClass myObject = new MyClass(); myObject.setSomething(scanner.nextLine());中的所有内容，以便它也可以对字体大小的变化作出反应。

＆＃13;

em

＆＃13;

span {
  font-size: 58px;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  background-color: rgb(44, 44, 44);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  margin-right: .1em
}
p:nth-of-type(even) span {
  font-size: 24px;
}

＆＃13;

Answer 2

对于那些可能不想在每个首字母周围添加额外元素的人，另一个解决方案是使用svg作为背景图像：

p:first-of-type:first-letter{
background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI1OCIgd2lkdGg9IjU4Ij4KICA8Y2lyY2xlIGN4ID0iMjkiIGN5ID0iMjkiIHIgPSIyOSIgc3R5bGU9ImZpbGw6IzQ0NDQ0NDtzdHJva2U6bm9uZTsiIC8+Cjwvc3ZnPgo=");
padding:0px 15px;
background-repeat:no-repeat;
background-position:center center;
}

保持宽度：带CSS的第一个字母

2 个答案: