vue项目中当元素内文本溢出时（超过width部分）显示省略标记（...）

<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>