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奶酪：CSS中限制span显示字数的更多相关文章

  1. css中的display(显示)和visibility(可见性)

    display定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险, ...

  2. [CSS]CSS中使用span和div遇到的问题

    一. span和div的区别 1.span是行级元素,div是块级元素2.span占用的宽度是内容的宽度,而div默认是一行.所以一般在页面中,只有一行或不到一行文字用span,元素占据多行时用div ...

  3. ZH奶酪：纯CSS自定义Html中Checkbox复选框样式

    原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...

  4. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  5. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  6. css中实现显示和隐藏（转）

    CSS中的display和visibility      在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...

  7. 如何在CSS中解决长英文单词的页面显示问题？CSS3

    简言 在页面排版中,经常遇到长英文单词溢出段落容器的情况,如何解决该问题?现编制如下对比演示程序: 演示程序 42du.cn-在线演示程序 部分html代码 <div class="b ...

  8. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  9. css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

随机推荐

  1. 统计代码执行时间,使用Stopwatch和UserProcessorTime的区别

    当我们需要统计一段代码的执行时间,首先想到的可能是Stopwatch类.在这里,先暂不使用Stopwatch,自定义一个统计代码执行时间的类,大致需要考虑到: 1.确保统计的是当前进程.当前线程中代码 ...

  2. maven报错

    今天执行mvn test的时候提示: 错误:读取 /home/subaochen/.m2/repository/org/slf4j/slf4j-api/1.6.1/slf4j-api-1.6.1.ja ...

  3. 学习 HTML+CSS 的书籍推荐

    1.<CSS那些事儿> 本书专注于CSS技巧实例的讲解,由浅入深地分析了CSS样式在布局时所需要理解的原理.绕开随处可见的基础知识.网络中能随意搜索到的hack技巧,侧重原理分析,拓展读者 ...

  4. java用正则方法验证文件名是否合法

    Java中用到文件操作时,经常要验证文件名是否合法. 用File类的createNewFile()方法的确很管用.但当要批量验证时,效率上就会有问题.正则匹配的开销比创建文件少了很多. 那么一个合法的 ...

  5. Mybatis对oracle数据库进行foreach批量插入操作

    MySQL支持的语法 INSERT INTO `tableX` ( `a`, `b`, `c`, `d`, `e` ) VALUES <foreach collection ="lis ...

  6. Hyperledger 项目

    https://github.com/hyperledger/fabric.githttps://github.com/hyperledger/blockchain-explorer.githttps ...

  7. 用Handler的post()方法来传递线程中的代码段到主线程中执行

    自定义的线程中是不能更新UI的,但是如果遇到更新UI的事情,我们可以用handler的post()方法来将更新UI的方法体,直接传送到主线程中,这样就能直接更新UI了.Handler的post()方法 ...

  8. [转]php使用 memcache 来存储 session

    转自:http://koda.iteye.com/blog/466667 Memcache和PHP memcach扩展安装请见http://koda.iteye.com/blog/665761 设置s ...

  9. sublime3 安装 Package Control 报错 “There Are No Packages Available For Installation”

    编辑Preferences > Package Settings > Package Control > Settings - User文件 码上 { "channels& ...

  10. 转：从头开始编写基于隐含马尔可夫模型HMM的中文分词器

    http://blog.csdn.net/guixunlong/article/details/8925990 从头开始编写基于隐含马尔可夫模型HMM的中文分词器之一 - 资源篇 首先感谢52nlp的 ...