我正在尝试为每个单词正上方的文本中的每个单词显示一个定义(如果定义重叠则无关紧要。稍后我将隐藏所有定义并且一次只显示一个定义。)
问题是一行的最后一个定义和最后一个单词不能保持在一起。当定义保留在前一行时,该字始终在下一行。
如何让它们粘在一起?
这是一个小提琴:https://jsfiddle.net/fiddledidi/vtub581m/
body .paircontainer {
position: relative;
}
.def {
position: absolute;
bottom: 3.75em;
}
.def span {
position: absolute;
display: block;
}
<div style="line-height: 375%">
<p>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
</p>
答案 0 :(得分:0)
将.paircontainer
设为inline-block
。此外,相对/绝对关系应该像我下面的代码段一样进行更改,并且我还调整了绝对元素的bottom
设置,并将line-height
分配给p
标记,而不是父:
.x {
line-height: 375%;
}
.paircontainer{
position: relative;
display: inline-block;
}
.def {
position: absolute;
bottom: 1.2em;
}
<div>
<p class="x">
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
</p>