将span元素与其容器顶部对齐

Question

当行高大于字体大小的1.1倍时，文本会在行内垂直居中。是否可以改为垂直对齐？

在这个例子中：

p {
  background-color: pink;
  font-size: 20px;
  line-height: 40px
}

span {
  background-color: lightblue;
}

<p>
  <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>

我希望文本能够靠近粉色框的顶部。所有额外的粉色空间都将在蓝色框下方，而不是在每行上下分裂。蓝色框将紧贴着粉色框的顶部。我尝试使用“vertical-align: top”或者在中添加“line-height”来帮助解决问题，但并没有成功。

（编辑后以显示文本可能非常长。）

- JPM

---

你为什么使用行高而不是填充或边距？ - j08691

是的，在实际情况中，非跨度文本有几个句子长。 - JPM

Answer 1

不同于丹尼尔的答案，但我想这也符合您的要求吧？

p {
  background-color: pink;
  font-size: 20px;
  vertical-align: top;
  height: 40px;
}

span {
  background-color: lightblue;
}

<p>
  <span>Hello World</span> Hello World
</p>

如果您的文本是多行的，我只能想到这个解决方案：

$("#fontsize-input").on("input",() => {
  $("p").css("font-size",$("#fontsize-input").val()+"px");
});

p {
  background-color: pink;
  font-size: 25px;
  line-height: 2em;
}

span {
  position: relative;
  top: calc(-0.45em + 1px);
}

.highlight {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="10" max="40" id="fontsize-input"/>
<p>
  <span class="highlight">Hello World</span> <span>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World</span>
</p>

- Richard Yan

---

糟糕，这行不通。我应该注意到非跨度文本可能非常长。我已经编辑了问题。 - JPM

@JPM 你的意思是什么？当它太长时，你想要什么？换行还是溢出？ - Dalin Huang

它应该换行。把浅蓝色的跨度想象成突出段落的前几个单词。 - JPM

@JPM 编辑了我的答案。看看是否符合您的需求 :) - Richard Yan

这也是我想到的唯一方法。不幸的是，它很脆弱。我希望有一种不会在顶部参数中硬编码的东西，可以自动适应字体大小和行高的变化。硬编码使布局不够灵活和响应。但这可能是我能做的最好的了。 - JPM

Answer 2

为保持行高度，你可以在span元素中添加display: inline-block;。

p {
  background-color: pink;
  font-size: 20px;
  line-height: 40px
}

span {
  background-color: lightblue;
  display: inline-block;
}

<p>
  <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>

- j-printemps

---

这就像我正在寻找的东西。它只是扩展了 span 的高度。不幸的是，如果 inline-block 本身跨越一行，那么这种方法就会失效，在我的情况下可能会发生这种情况。（在每个单词上设置 span 在这里并不实际。）我希望只需在 span 上设置 height:100% 就可以解决问题，但事实并非如此。 - JPM

哦，我找到了一种使这个工作的方法。在我的情况下，我找到了一个避免让内联块换行的方法。谢谢，@j-printemps！ - JPM

Answer 3

使用填充的解决方案：

p {
  background-color: pink;
  font-size: 20px;
  padding: 0 0 20px 0;
  /* padding for top,right,bot,left */
}

span {
  background-color: lightblue;
}

<p>
  <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>

- Dalin Huang