<template>
<div class="box">
<div class="left">
<img src="http://y.gtimg.cn/music/photo_new/T003R300x300M000000ywolj2fIe6R.jpg"/>
</div>
<div class="right">
<p>内容11内容11111内容11111内容11111内容11111内容11111内容11111内容11111内容11111内容11111111</p>
<p>内容22内容</p>
</div>
</div>
</template>
<style scoped>
.box{
display: flex;
padding: 20px;
background-color: antiquewhite;
height: 100px;
}
.left{
flex: 0 0 100px;
padding-right: 20px;
}
.left img{
width: 100%;
}
.right{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 10px;
/* 一定要加这个属性,溢出才会点点点 */
overflow: hidden;
}
.right p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 2;
}
</style>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
左边定宽,右边超出点点点显示
最新推荐文章于 2023-05-03 17:30:21 发布