Question

我有一个带有教学系统的游戏。有一个div，其中包含p和继续按钮。用户将多次单击“继续”按钮以阅读新内容，然后开始玩游戏。

我希望我的p标签始终为2行，以便按钮停留在同一位置（p有时为1行或3行，因此按钮会四处移动，从而使用户不得不沿着鼠标移动，而不仅仅是单击鼠标）

我也不想只放置按钮，因为多余的空间看起来不好。

外部div没有宽度/高度限制

示例（outerDiv没有设置宽度或高度）：

    <div id="outerDiv"><p id="example">this text can vary in length, but still make this 2 lines</p><div>

Answer 1

考虑到p中的内容行是可变且不可预测的，我更喜欢使用高度固定的容器来显示内容，并在内容太长时为其提供滚动条，如下所示：

document.getElementsByTagName('button')[0].addEventListener('click', function() {
  document.getElementById('example1').style.display = 'none';
  document.getElementById('example2').style.display = 'block';
});

.outerDiv {
  margin-bottom: 10px;
  padding: 15px;
  width: 400px;
  height: 200px;
  border: 1px solid;
  overflow-y: auto;
}
#example2 {
  display: none;
}
p {
  margin: 0;
}

<div class="outerDiv">
  <p id="example1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  <p id="example2">Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
</div>
<button>Next</button>

HTML使p标签始终为2行

1 个答案: