我在处理包含 span 元素的段落的高度时遇到了问题:
这是 HTML 的设置:
<div class="container" id="container">
<div id="captionRegion" class="captionRegion"
style="left: 10%; top: 10%; width: 80%; height: 80%;
align-items: flex-end; background-color: rgb(0, 128, 0);">
<div class="paragraph" style="justify-content: center; text-align: center;
background-color: rgb(255, 0, 0); line-height: initial;">
<div class="innerContainer">
<span style="color: rgb(255, 255, 255); font-size: 38.4px;
font-family: monospace; background-color: rgb(0, 0, 0);">
One line Subtitle.
</span>
</div>
</div>
</div>
</div>
CSS:
.container{
width:160vh; /* 16:9 */
height:90vh; /* 16:9 */
position: absolute;
display: flex;
overflow: hidden;
margin: 0;
font-size: 6vh;
}
.captionRegion{
position: absolute;
z-index: 2147483647;
margin: 0;
display: flex;
}
.paragraph{
display: flex;
width: 100%;
}
我正在使用 flex 盒子。 知道如何使红色段落适合跨度行高大小吗? 谢谢。
最佳答案
Span 是一个内联元素。它没有宽度或高度。
你可以把它变成一个 block 级元素,然后它会接受你的维度指令。
对 span
使用以下样式:
display: block;
height:100%;
查看工作插件:“http://plnkr.co/edit/MrCVzIbpETzYEs0N5rV6?p=preview”
关于html - 段落的 CSS 行高太高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31043776/