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. Icon cache rebuilding with Delphi（Delphi 清除Windows 图标缓存源代码）

    清除Windows图标缓存的代码: procedure RebuildIconCache; .... const sr_WindowMetrics='Control Panel\Desktop\Win ...

  2. lufylegend:Lbuttion等UI组件

    1,矩形按钮LButtonSample1 首先来看看LButtonSample1按钮的绘制. 在lufylegend.js引擎中可以利用LButton类来添加一个按钮,但是你需要传入按钮弹起和按钮按下 ...

  3. self.xxx = nil 可以等效于[_xxx release] _xxx= nil 么

    如果属性是copy.retain的话是等价的.如下: - (void)setXXX:(NSString*)axx { if (_xxx != axx) { [_xxx release]; _xxx = ...

  4. VisualStudio：如何监控 ADO.NET？

    背景 很多场景下我们都需要监控 ADO.NET,如:查看某些框架(ORM)生成的 SQL.如何在不能使用 SQL Profile 的情况下监控 SQL 呢?VS 为我们提供了一个工具,本文做一些介绍! ...

  5. python测试开发django-35.xadmin注册表信息

    前言 xadmin后台如果要对表的内容增删改查,跟之前的admin.py文件里面写注册表信息一样,需在admin.py同一级目录新建一个adminx.py的文件. 然后在adminx.py文件控制页面 ...

  6. 从零開始学android&lt;使用嵌套布局实现计算器界面.十七.&gt;

    所谓的嵌套布局就是在一个文件里嵌套多个布局文件 <span style="font-size:18px;"> <LinearLayout android:layo ...

  7. jquery插件--在input下输入密码时提示大写锁定键

    //密码大写输入提示 function capitalTip(id){ $('#' + id).after('<div class="capslock" id="c ...

  8. 《SEO教程：搜索引擎优化入门与进阶(第3版)》

    <SEO教程:搜索引擎优化入门与进阶(第3版)> 基本信息 作者: 吴泽欣 丛书名: 图灵原创 出版社:人民邮电出版社 ISBN:9787115357014 上架时间:2014-7-1 出 ...

  9. ARCH模型

    ARCH模型的基本思想 ARCH模型的基本思想是指在以前信息集下,某一时刻一个噪声的发生是服从正态分布.该正态分布的均值为零,方差是一个随时间变化的量(即为条件异方差).并且这个随时间变化的方差是过去 ...

  10. sugar crm

    百度百科:http://baike.baidu.com/link?url=7SnriwrF-4LcRfXctBbZjLc-UEUqWl3b0YR004pGFk4SJ1qMU9TMj37yFmHRsUS ...