<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>
11-11
6万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-26
8285
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
11-10
556
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
11-27
540
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
11-01
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交