<tempalte>
<div class="list" v-for="item in items" :key="item.id">
<img src="../../assets/img/index/right.png" alt="" class="right"/>
<span class="head_title ">{{item.title}}</span>
<span class="date">{{item.date}}</span>
</div>
</tempalte>
<script>
export default {
name: 'HelloWorld',
data () {
return {
items: [
{
title: '开展“不忘初心、牢记使命”主题教育要点会议哈哈哈哈哈哈哈哈哈哈哈',
date: '2020-08-18'
},
{
title: '开展“不忘初心、牢记使命”主题教育要点会议哈哈哈哈哈哈哈哈哈哈哈',
date: '2020-08-18'
},
{
title: '开展“不忘初心、牢记使命”主题教育要点会议哈哈哈哈哈哈哈哈哈哈哈',
date: '2020-08-18'
},
{
title: '开展“不忘初心、牢记使命”主题教育要点会议哈哈哈哈哈哈哈哈哈哈哈',
date: '2020-08-18'
},
{
title: '开展“不忘初心、牢记使命”主题教育要点会议哈哈哈哈哈哈哈哈哈哈哈',
date: '2020-08-18'
},
{
title: '开展“不忘初心、牢记使命”主题教育要点会议哈哈哈哈哈哈哈哈哈哈哈',
date: '2020-08-18'
},
{
title: '开展“不忘初心、牢记使命”主题教育要点会议哈哈哈哈哈哈哈哈哈哈哈',
date: '2020-08-18'
}
]
}
},
methods: {},
}
</script>
<style scoped>
.head_title {
width: 440px;
overflow: hidden;
word-break: break-all; //强行换行,将截断英文单词
text-overflow: ellipsis; //当元素内文本溢出时(超过width部分)显示省略标记(...)
white-space:nowrap; //文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止
}
</style>
vue项目中当元素内文本溢出时(超过width部分)显示省略标记(...)
最新推荐文章于 2024-04-26 22:14:41 发布