【文本超出一行，显示省略号，悬浮出现tooltip】

VUE

<ul class="historyList">
	<li @mouseover="onMouseOverHistoryItem('history' + index)"  v-for="(item,index) of historyList" :key="index" @click="clickHistoryItem(item)">
		<el-tooltip :disabled="isShowTooltip" :content="item" placement="top">
			<div class="longText ">
				<span :ref="'history' + index">{{ item }}</span>
			</div>
		</el-tooltip>
	</li>
</ul>

onMouseOverHistoryItem(refName) {
	let parentWidth = 0 ;
    let contentWidth = 0 ;
    if(!this.$refs[refName].parentNode){
        parentWidth = this.$refs[refName][0].parentNode.offsetWidth;
        contentWidth = this.$refs[refName][0].offsetWidth;
    }else{
        parentWidth = this.$refs[refName].parentNode.offsetWidth;
        contentWidth = this.$refs[refName].offsetWidth;
    };
    
    // 判断是否开启tooltip功能
    if (contentWidth > parentWidth) {
        this.isShowTooltip = false;
    } else {
        this.isShowTooltip = true;
    };
},

SASS

.historyList {
	margin: 0 -12px;
	li {
		padding: 0 12px;
		color: #626675;
		line-height: 28px;
		width: 100%;
		box-sizing: border-box;
		&:hover,&:focus {
			cursor: pointer;
			background-color: #ecf5ff;
			color: #66b1ff;
		}
		.longText {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}