小编Phi*_*ipp的帖子
使绝对定位的元素打破可滚动文本
我有一个呈现文本的文本框。该文本框具有最大高度，并且其溢出设置为auto使其可滚动。现在我想介绍一个呈现在该文本框右下角的复选框。为了实现这一点，我将复选框绝对放置在右下角。这已经按预期工作了：
现在我的问题是：是否可以使文本在复选框周围断开，从而防止文本被复选框隐藏？
必须同时实现这一点，同时仍然确保滚动文本时复选框不会移动，并且它应该保留（至少在视觉上）在文本框内。
我已经尝试过使用弹性布局和网格布局方法，但这些方法要么失败，要么因为复选框在滚动过程中移动，或者复选框使用了文本框外部的额外空间，这是我不希望发生的情况。
还有一个相关问题得到了解决方案，但在该问题中，文本不可滚动，因此可以在可滚动文本框中添加一个不可见的间隔符来破坏文本。该解决方案在这里不起作用，因为我们不知道在哪里添加间隔符，因为根据滚动位置，它必须位于不同的位置。
我当前的版本中文本在复选框下方运行（这是不需要的）可以在这个小提琴中找到：
.text {
white-space: pre-wrap;
max-height: 8em;
overflow-y: auto;
}
.read {
display: inline;
padding: 8px;
position: absolute;
bottom: -2px;
right: 36px;
background: white;
border: 1px solid black;
}
.wrapper {
position: relative;
}<div class="wrapper">
<div class="text">
Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello …5
推荐指数
推荐指数
1
解决办法
解决办法
251
查看次数
查看次数