有没有办法根据制作的框中剩余的空间显示按钮

Question

我有一个由div制成的自定义盒子。在这种情况下，我以无序列表的形式从字符串数组中填充数据。这个盒子的大小是固定的，所以如果整个数据没有固定盒子，就会出现问题。

Box
---------------- 
| * First      |
| * Second     |
| * Third      |
----------------

三个以上的元素不适合盒子。为此，我显示了更多按钮，该按钮将重定向到更多元素。

Box
---------------- 
| * First      |
| * Second     |
| More >       |
----------------

在这里，我想根据剩余空间显示更多按钮。因为可能是本案

Box
---------------- 
| * First point|
| is long      |
| More >       |
----------------

最好的方法是什么？

Answer 1

我认为最好将数组中的所有项目添加到 DOM 中，然后计算框的高度。 如果框大小没有足够的空间用于按钮和项目，则需要逐个删除项目。

这是我的方法：

let buttonHight = $('button').outerHeight();
  let boxInnerHeight = $('.box').height() - parseInt($('.box').css('padding-top')) - parseInt($('.box').css('padding-bottom'));
  let listHeight = $('.list').outerHeight();
  
	
	
	while(boxInnerHeight - buttonHight < listHeight){
	
	$('p').last().remove();
	
	buttonHight = $('button').outerHeight();
	boxInnerHeight = $('.box').height() - parseInt($('.box').css('padding-top')) - parseInt($('.box').css('padding-bottom'));
	listHeight = $('.list').outerHeight();
	
	$('button').css('display','block');
	
		
	}
	$('p').each(function(item){
		$(this).css('opacity','1');
	})
	

.box{
  width: 150px;
  height: 200px;
  background-color: #bbbbcc;
  padding:10px;
  position: relative;
}
.list p{
	opacity: 0;
	margin: 0 0 10px 0;
}
.list button{
	display:none;
  height: 25px;
  position:absolute;
  bottom:10px;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div class="list">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate sem non vehicula euismod. Vestibulum feugiat vel nisi et iaculis. Phasellus ut varius sem.</p>
    
    <button>see more</button>
  </div>
</div>