将跨度与其容器顶部对齐

Question

似乎当 line-height 大于 1.1 倍 font-size 时，文本会在行中垂直居中。它可以垂直对齐吗？

在这个例子中

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到跨度来帮助。

（编辑以显示文本可能很长。）

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>

Answer 2

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

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>