示例效果
内容少时需要显示为(第一张),内容多是需要显示 (第二张)
这里实现主要使用flex 布局+两个盒子 配合,里面的ul 盒子必须设置一个最大的高度,才能使用内容不超出最外层盒子(如图 内容超出前面的内容被上图覆盖导致显示不全),
主要代码
css部分
.poetry-full-box {
height: 140px;
overflow-x: auto;
padding: 0 10px;
position: relative;
text-align: center;
}
.flex-c-c {
display: flex;
align-items: center;
justify-content: center;
}
.poetry-msg {
max-height: 140px;
font-size: 13px;
}
html 采用了vue
<div class="poetry-full-box flex-c-c" >
<ul class="poetry-msg" v-if="poetry.origin != null">
<li v-for="item in poetry.origin.content" :key="item">{{ item }}</li>
</ul>
</div>