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. Arcgis Pro为什么我已经安装了汉化包但是显示的还是英文？

  2. Flash对象插入到网页中的3px问题

    我记得我已经遇到过,不过今天又遇到了,而且浪费了大量的时候在上面,甚至怀疑自己写的脚本有问题,花了几乎一个下午来调试这个问题.最后发现是样式导致的- 公司里有很多网页游戏,之前是项目多,抄来抄去,JS ...

  3. 开源项目MultiChoiceAdapter详解（三）——MulitChoiceNormalArrayAdapter的使用

    MulitChoiceNormalArrayAdapter是我自己定义的一个类,其实就是实现了MulitChoiceArrayAdapter,为什么做这个简单的实现类呢,因为这样我们在不用Action ...

  4. Java 8函数式接口functional interface的秘密

    Java 8函数式接口functional interface的秘密 2014年10月29日 17:52:55 西瓜可乐520 阅读数:3729   目录 [−] JDK 8之前已有的函数式接口 新定 ...

  5. C#中的命名空间namespace与Java中的包package之间的区别

    Java 包被用来组织文件或公共类型以避免类型冲突.包结构可以映射到文件系统. System.Security.Cryptography.AsymmetricAlgorithm aa; 可能被替换: ...

  6. junit5了解一下

    要求java8及以上版本 JUnit 5 = JUnit Platform + JUnit Jupiter + JUnit Vintage https://junit.org/junit5/docs/ ...

  7. 远程连接Oracle数据库

    ylbtech-Oracle:远程连接Oracle数据库  所谓远程连接Oracle数据库,是指Oracle数据库服务器和Oracle客户端分别安装在2台电脑上,我们使用Oracle客户端来连接在另一 ...

  8. 置顶菜单demo

    一朋友需要置顶菜单的功能,给了个网站,让弄下来.看了下,就把样式及效果拔了下来.去掉了复杂的东西,只保留了其基本实现.有需要的朋友可以拿去用用. <style> #navigation{ ...

  9. 【deep learning学习笔记】注释yusugomori的DA代码 --- dA.h

    DA就是“Denoising Autoencoders”的缩写.继续给yusugomori做注释,边注释边学习.看了一些DA的材料,基本上都在前面“转载”了.学习中间总有个疑问:DA和RBM到底啥区别 ...

  10. C语言中将0到1000的浮点数用强制指针类型转换的方式生成一幅图像

    搞过计算机图像的人都知道,图像中的每一个像素通常为一个整型数,它可以分成4个无符号的char类型,以表示其RGBA四个分量.一幅图像可以看做是一个二维整型数组.这里我会生成一个float数组,其数组大 ...