Question

我正在尝试为每个单词正上方的文本中的每个单词显示一个定义（如果定义重叠则无关紧要。稍后我将隐藏所有定义并且一次只显示一个定义。）

问题是一行的最后一个定义和最后一个单词不能保持在一起。当定义保留在前一行时，该字始终在下一行。

如何让它们粘在一起？

这是一个小提琴：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>

Answer 1

将.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>

保持容器的内容在一起

1 个答案: