span标签显示固定长度显示省略号,光标放上显示全部

简介: span标签显示固定长度显示省略号,光标放上显示全部


  • 固定长度显示省略号
max-width: 10em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; /*超出部分用...代替*/
  • 光标放上显示全部
<span class="basic" style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' id="id" title=""></span>
$("#id").text("标签1,标签2");
$("#id").attr("title","标签1、标签2");

white-space:nowrap;为规定段落中的文本不换行;

text-overflow:ellipsis;为当文本内容溢出时显示省略标记;

overflow:hidden;为超出宽度后就隐藏

为title属性赋值使用$("#id").attr(“title”,title值)。


相关文章
如何获取与设置光标在input框的位置
如何获取与设置光标在input框的位置
如何获取与设置光标在input框的位置
|
JavaScript 前端开发
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
|
6月前
|
图形学
用vs2017写代码遇到的一个问题(空白区域显示点)
用vs2017写代码遇到的一个问题(空白区域显示点)
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
362 0
Word中标题编号消失,变为竖线的问题处理
Word中标题编号消失,变为竖线的问题处理
Word中标题编号消失,变为竖线的问题处理
|
Web App开发 存储 弹性计算
div中文字超过指定数量后不显示并且以省略号结尾
div中文字超过指定数量后不显示并且以省略号结尾
377 0
div中文字超过指定数量后不显示并且以省略号结尾