CSS中限制span显示字数

简介:

span中的文字是取出于数据库的,不确定文字的个数,由于排版的原因只想让span不超过6个字,如果超过只显示六个,当鼠标悬浮上去的时候tip显示全部内容

Step1.在span中添加title

<span title="文字文字文字文字文字文字文字">文字文字文字文字文字文字文字</span>

Step2.设置span宽度

复制代码
span{
  display: block;
  width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
复制代码

演示地址



本文转自ZH奶酪博客园博客,原文链接:http://www.cnblogs.com/CheeseZH/p/4643866.html,如需转载请自行联系原作者

相关文章
|
前端开发
CSS文字溢出显示省略号,且出现title或者tooltip
CSS文字溢出显示省略号,且出现title或者tooltip
1782 0
CSS文字溢出显示省略号,且出现title或者tooltip
|
前端开发
CSS 让div,span等块级、非快级元素排列在同一行
CSS 让div,span等块级、非快级元素排列在同一行
154 0
|
前端开发 JavaScript 计算机视觉
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
1104 0
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
|
前端开发 JavaScript
闲来无事,配合CSS变量搞个Vue数据显示组件吧~
闲来无事,配合CSS变量搞个Vue数据显示组件吧~
197 0
|
前端开发 容器
CSS移动端布局和文字溢出显示省略号
文章主要学习使用css文字溢出处理和溢出部分效果的处理
298 0
CSS移动端布局和文字溢出显示省略号
|
前端开发
常见的CSS文字居中显示
常见的CSS文字居中显示
html+css实战164-溢出显示效果overflow
html+css实战164-溢出显示效果overflow
135 0
html+css实战164-溢出显示效果overflow
html+css实战158-定位-显示层级
html+css实战158-定位-显示层级
146 0
html+css实战158-定位-显示层级
|
前端开发
CSS——CSS元素的显示与隐藏
CSS——CSS元素的显示与隐藏
144 0
CSS——CSS元素的显示与隐藏
|
前端开发
div实现可以滚动但不显示滚动条(纯CSS实现)
div实现可以滚动但不显示滚动条(纯CSS实现)
div实现可以滚动但不显示滚动条(纯CSS实现)