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. Javascript:原型模式类继承

    原型模式 每个函数(准确说不是类.对象)都有一个prototype属性,这个属性是一个指针,指向一个对象. 使用原型对象的好处是可以让所有对象实例共享它包含的属性和方法.   1.原型对象 (1)当创 ...

  2. springboot—spring aop 实现系统操作日志记录存储到数据库

    原文:https://www.jianshu.com/p/d0bbdf1974bd 采用方案: 使用spring 的 aop 技术切到自定义注解上,针对不同注解标志进行参数解析,记录日志 缺点是要针对 ...

  3. Linux下Tomcat的启动、关闭

    在Linux系统下,启动和关闭Tomcat使用命令操作. 进入Tomcat下的bin目录 1 cd /java/tomcat/bin 启动Tomcat命令 1 ./startup.sh 停止Tomca ...

  4. JavaScript：动态代理之远程代理

    背景 2008 第一次使用 AJAX 的时候好像使用的是 AJAX.NET,该组件支持为服务器 C# 类型提供 JS 代理,当时不是十分的明白.设计模式中有代理模式,不过真正需要我们手工写代理的次数却 ...

  5. 《iOS 7 应用开发实战详解》

    <iOS 7 应用开发实战详解> 基本信息 作者: 朱元波    管蕾 出版社:人民邮电出版社 ISBN:9787115343697 上架时间:2014-4-25 出版日期:2014 年5 ...

  6. 阿里云centos中mysql的安装及一些常识知识

    -------------------------------------------------------------------    阿里云centos中mysql的安装 工具WinSCP v ...

  7. K3 LEDE固件更改FRP客户端版本

    1.下载文件 /usr/bin/wget --no-check-certificate https://github.com/fatedier/frp/releases/download/v0.23. ...

  8. go语言之进阶篇json解析到结构体

    1.json解析到结构体 示例: package main import ( "encoding/json" "fmt" ) type IT struct { ...

  9. SharePoint 列表权限控制

    一提到sharepoint 我相信权限控制一定会是一个很重要的话题,尤其是对列表的权限控制,创建.修改.查看权限.其实网上这方面的资料已经很多了,尤其是以下2篇文章,后来索性把CodeArt_Perm ...

  10. ThinkPHP3.2.3使用分页

    首先要搞清楚的就是ThinkPHP3.2.3的分页类已经被移到了Think\Page.class.php,这是跟以前的版本有些不一样的,使用起来还是跟以前版本差不多,但是默认的效果不敢恭维,所以最好是 ...