如何让“查看更多”按钮在屏幕分辨率较低时始终保持在元素右边？

如何解决一个元素布局的问题

在这个布局中，有一个查看更多按钮需要始终保持在右边，但当屏幕分辨率较低时，按钮可能会超出元素的边界。

问题

如何解决查看更多按钮在屏幕分辨率较低时超出元素边界的问题，以便它始终保持在右边？

代码

<div class="tips">
  <span>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</span>
  <span class="click-more">查看更多<i class="el-icon el-icon-d-arrow-right"></i></span>
</div>

<div class="btn-list">
  <button>保存</button>
</div>

解决方法

给.tips元素添加两个CSS属性：

.tips {
  height: auto;
  overflow: hidden;
}

• height: auto; - 允许元素根据内容自动调整高度
• overflow: hidden; - 隐藏超出元素边界的任何内容