效果:
未缩放时:
缩放时:
整体思路:使用ul和li标签,ul使用display:flex布局,li里面放文字和图标,当宽度足够时文字全部展示,宽度不够时溢出文字用…代替,图标不变。
1.文字溢出时使用…代替的实现方法:这三种样式缺一不可
最开始是把文字放在span标签里面了,但是发现无法实现…效果,如下,这样页面缩放时,li的宽度并不会随着缩放。
为了达到宽度不够时文字的…效果和图标不变的效果,使用了以下布局:文字部分直接放在li标签中,给li设置左右的padding,用来放i标签中的图标。
整体代码:
<template>
<div>
<ul class="content">
<li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
<li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
<li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
<li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
<li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
</ul>
</div>
</template>
<script>
export default {
data(){
}
}
</script>
<style scoped>
.content{
display: flex;
border-bottom: 1px solid #666;
}
.content li{
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 5px 15px;
position: relative;
color: #666;
border:1px solid #666;
border-bottom: none;
border-radius: 5px 5px 0 0;
margin-right: 5px;
}
.content li i{
width: 15px;
height: 15px;
position: absolute;
right: 0;
}
</style>