使用工具：vue、el-element、jq\js
原理：①element中利用tooltip实现文字超出框悬浮显示；②用vue、jq事件监听是否溢出，溢出则出现文字提示。
css：

#messageSubscription .subProduct-name {
    width: 264px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 2px;
    border: 1px solid #DDE1EB;
    margin-right: 16px;
    margin-bottom: 8px;
    line-height: 32px;
    padding: 0 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;//溢出隐藏
    text-overflow: ellipsis;//溢出省略号
    position: relative;
    font-size: 14px;
    color: #313836;
}

html：

<el-tooltip content="Top center" placement="top" :disabled="isDisabledTooltip">
								<div class="subProduct-name" @mouseover="onMouseOver($event)">{{name}}

								</div>
								</el-tooltip>

js:

// 移入事件: 判断内容的宽度scrollWidth>offsetWidth说明溢出
				onMouseOver(e) {
					var scrollWidth = e.target.scrollWidth
					var clientWidth = e.target.clientWidth
					// 判断是否禁用tooltip功能
					this.isDisabledTooltip = scrollWidth >= clientWidth;
				},