文本从其容器中取出

Question

我不知道为什么现代浏览器中的整个字体不适合其对应的宽度？因此，在这里我们可以看到一个出色的示例，其中84超出了宽度边界...为什么？

通过devtools屏幕截图获取的示例：

通过代码：

.test {
  color: #fff;
      font-family: Arial, sans-serif;
      font-size: 8px;
      line-height: 2;
      position: absolute;
      text-align: right;
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

<span class="test">84</span>

Answer 1

文本本身（以白色显示）留在范围内。您所应用的文本阴影在布局时不会被考虑，因为它被视为纯粹的美学元素。

如果要防止文本阴影离开跨度，可以设置overflow: hidden：

.test {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 80px;
  position: absolute;
  text-align: right;
  text-shadow: -10px -10px 0 #000, 10px -1px 0 #000, -10px 10px 0 #000, 10px 10px 0 #000;
  background: red;
  overflow: hidden;
}

<span class="test">84</span>

如果要使框扩展以覆盖阴影，则可以根据需要添加一些填充：

.test {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 80px;
  position: absolute;
  text-align: right;
  text-shadow: -10px -10px 0 #000, 10px -1px 0 #000, -10px 10px 0 #000, 10px 10px 0 #000;
  background: red;
  padding: 0.1em;
}

<span class="test">84</span>

Answer 2

您可以将阴影宽度设置为像素的一半（ra.seedPartInstance(regions=(a,b,c), size=1.0) ra.setMeshControls(elemShape=QUAD, regions=(a.faces+b.faces+c.faces), technique=STRUCTURED) ra.setElementType( elemTypes=eltyp, regions=(a.faces,b.faces,c.faces)) ra.generateMesh(regions=(a,b,c)) ）

0.5px

.test {
  color: #fff;
      font-family: Arial, sans-serif;
      font-size: 8px;
      line-height: 2;
      position: absolute;
      text-align: right;
      text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;
}