文字过长显示tooltip

前几天遇到一个问题：文字过长显示tooltip，反之不展示

方法一：
文字超过12个字符剩余部分用省略号代替，展示tooltip

<el-tooltip class="item" effect="dark" content="title" placement="top" :disabled="title.length> 12"><span>{{title.lenght>12?"title.slice(0, 12) + '...'":"title"}}</span>
</el-tooltip>

如果要做页面齐其效果，可能就有点不太美观，因为相同宽度的的盒子实际存放的数字，字母和汉字个数不同。这时可以采用如下方法：

方法二：
分为3部：1.写一个el-tooltip，里面添加两个元素div、span
                 2.给父元素设置样式：
                  （1）添加宽度，
                  （2）内容固定显示一行显示，
                  （3）超出部分用省略号代替
                3.鼠标移入文字判断内容的宽度是否超出盒子的宽度，超出使用el-tooltip。

    <el-tooltipclass="item"effect="dark":disabled="isShowTooltip":content="content"placement="top"><divclass="over-flow"@mouseover="onMouseOver('refName')"><span ref="refName">{{ content }}</span></div></el-tooltip>

export default {data() {return {isShowTooltip: true,content:'内容'};},methods: {onMouseOver(str) {let parentWidth = this.$refs[str].parentNode.offsetWidth;let contentWidth = this.$refs[str].offsetWidth;// 判断是否开启tooltip功能if (contentWidth > parentWidth) {this.isShowTooltip = false;} else {this.isShowTooltip = true;}}}
};

.over-flow {width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
p {margin: 0;
}

文字过长显示tooltip相关推荐

iView表格显示图片和文字过长显示省略号，并且Tooltip提示
iView表格显示图片和文字过长显示省略号,并且Tooltip提示效果图代码 {title: 'LOGO',key: 'logo',align: "center",render ...
echarts横坐标文字太长显示不完的两种解决办法：rotate旋转文字、调用函数让文字纵向排列
//方法1:横坐标文字太长显示不完,调用函数解决,在axisLabel下添加属性,让文字纵向排列: formatter:function(val){return val.split("&qu ...
php 中文过长省略号,css实现文字过长显示省略号
本篇文章介绍了css实现文字过长显示省略号的方法,具有一定的参考价值,希望对学习css的朋友有帮助! 一.CSS样式解决文字过长显示省略号问题 1.一般样式一般 css 样式,当宽度不够时,可能会 ...
css 文字过长省略号,css实现文字过长显示省略号的方法
因为网页排版的需要,有些地方需要过长的问题加上省略号.比如:标题限制20个中文的宽度,超出的就用省略号代替.之前会使用程序截取的方法,不过使用css来截取更有利于SEO. 下面就介绍一下具体的使用方法 ...
Echarts给折线图给横竖坐标轴添加箭头与标签文字过长显示不全处理
本人在做监控数据大屏时曾踩过不少坑,现将踩坑经验总结如下,数据大屏demo请点击这里一.饼图处理标签文字过长而显示不全的解决方案在使用echarts的过程中,有时会遇到标签文字过长导致显示不全的问 ...
css实现文字过长显示省略号的方法
转自:http://www.3lian.com/edu/2014/07-11/155082.html 因为网页排版的需要,有些地方需要过长的问题加上省略号.比如:标题限制20个中文的宽度,超出的就用省 ...
echarts实现给图例添加单位、百分比，以及图例文字过长显示省略号
修改lengend formatter: (name) => {if (this.seriesData.length) {let sum = 0;this.seriesData.forEach( ...
css文字过长显示...的几种方案
1.一排超长截距(完美兼容各种浏览器) .zxx_text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-te ...
css 单行space-between左右布局，左边元素文字过长显示省略号
效果: 代码: <view style="display: flex;justify-content:space-between;"><text style=&q ...

文字过长显示tooltip

文字过长显示tooltip相关推荐

最新文章

热门文章