Question

我有需要绝对定位在页面上的文本坐标，但我所拥有的坐标是文本的基线，而不是文本的左上角（可能是取决于字符的任何内容。）

目前，文字将位于左上角，这使得无法准确定位文字。

如何设置文本基线的绝对位置？也就是说，我想指定文本基线的位置，而不是文本的顶部。

<div style="position:absolute; top:0px; left:0px; font-size: 42px;">This text should be off the page because it's baseline is set at 0.</div>
<div style="position:absolute; top:42px; left:0px; font-size: 42px;">Second line of text should be where the first one is, more or less.</div>

Answer 1

您需要将divs包含在具有相对定位的div中。这样当你设置bottom: 0时，它实际上会相对于那个div移动，给你一种消失的幻觉。

示例CodePen

请注意，您可能会看到一些挂字母。要调整此项，您只需向bottom: 20px;

添加更多内容即可

<div style="position:relative;">
    <div style="position:absolute; bottom: 0; left:0px; font-size: 42px;">This text should be off the page because it's baseline is set at 0.</div>
    <div style="position:absolute; left:0px; font-size: 42px;">Second line of text should be where the first one is, more or less.</div>
</div>

Answer 2

这是一个选项。我使用基线方法来获得一致的领先地位，因此您无需担心字体指标。然后，我移动所有框，使它们脱离翻译屏幕。使用top将框的底部基线放置在您想要放置的位置。

/* 1. Include a baselined font */
@font-face {
  font-family: "Baseline Em";
  src: url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff2") format("woff2"), url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff") format("woff"), url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Simple reset */
body, html {
  padding: 0;
  margin: 0;
}

/* 2. Setting block elements up - Leading */
div {
  font-family: "Baseline Em", sans-serif; /* Baselined font only needed at block level */
  line-height: 1em;
  font-size: 42px; /* equivalent to leading */
}

/* 3. Setting up font and font-size */)
span {
  font-family: sans-serif;
  line-height: 0;
  font-size: 30px; /* whatever size you want, but will affect how many lines */
}

/* 4. Positioning */
div:nth-of-type(1) {
 outline: 3px dotted blue;
 position: absolute;
 left: 0;
 top: 0;
 transform: translateY(-100%);
}

/* Positioning */
div:nth-of-type(2) {
 outline: 3px dotted red;
 position: absolute;
 left: 0;
 top: 42px;
 transform: translateY(-100%);
}

<div><span>1st line of text</span></div>
<div><span>2nd line of text</span></div>

Answer 3

我为你创建了一个demo

我希望那就是你所要求的。您可以相应地更改css以保持顶行固定，或在浏览器调整大小时滚动页面。

键是bottom和top属性。

CSS：绝对按基线定位文本？

3 个答案: