将跨度对齐到其容器的顶部

看来，当行高度大于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添加到跨度来帮助。

（编辑，以表明该文本可能会很长）

来源

2017-06-15 JPM

任何原因，你正在使用的line-height，而不是填充或利润率？ – j08691

是的，在实际案例中，非跨文本文本是多个句子。 – JPM

为了保持行高，您可以将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>

来源

2017-06-15 07:59:37

这就像我在找什么。它只是扩大了跨度的高度。不幸的是，如果内联块本身跨越一条线，就会发生这种情况，这在我的情况下可能会发生。（在每个单词上设置跨度在这里是不实际的。）我希望设置高度：跨度工作时为100％，但不是。 – JPM

哦，我找到了一种方法来完成这项工作。就我而言，我找到了一种避免让内联块换行的方法。谢谢，@ j-printemps！ – JPM

解决方案使用填充：

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>

来源

2017-06-15 02:58:18

@JPM这不适合你吗？你需要什么？ –

从丹尼尔的回答不同，但我想这符合你的要求太？

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>

来源

2017-06-15 03:02:13

不错，+1最多 –

哎呀。这不起作用。我应该注意到，非跨文本文本可能会很长。我编辑了这个问题。 – JPM

@JPM你的意思是？当它太长，你想要什么？包装或溢出？ –

将跨度对齐到其容器的顶部

回答

相关问题