CSS文字超出部分用省略号代替,js鼠标悬停时显示全部文本
需求:宽度为百分比,随浏览器变化而变化,当窗口变小到一定程度,文字超出部分用省略号代替,当文字出现省略号,需要鼠标悬停时显示全部文本。文字超出部分用省略号代替width:overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 鼠标悬停时显示全部文本1、给当前span设置title就行了,在Vue中,使用:
·
需求:
宽度为百分比,随浏览器变化而变化,当窗口变小到一定程度,文字超出部分用省略号代替,当文字出现省略号,需要鼠标悬停时显示全部文本。
文字超出部分用省略号代替
width:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
还有一种用js控制
需要确定文字长度,超出这个长度就隐藏
fontNumber (date) {
const length = date.length
if (length > 30) {
var str = ''
str = date.substring(0, 30) + '......'
return str
} else {
return date
}
}
鼠标悬停时显示全部文本
1、给当前span设置title就行了,在Vue中,使用:对title进行绑定,可以动态获取值。很丑
2、鼠标移上去时直接释放宽度限制
3、鼠标移上去时释放overflowd的截取,按照原本样式显示,即换行
4、在div中绑定鼠标经过事件
跟title样式一样 ,丑
onload = function(){
content.onmouseover = function(){
this.title = this.innerHTML;
}
}
这些办法不适合我的需求。
5、自定义弹出层
更多推荐
已为社区贡献1条内容
所有评论(0)