开发者社区> 技术小哥哥> 正文

CSS中限制span显示字数

2017-11-13 2608

简介：

+关注继续查看

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显示 CSS span

开发者社区 > 数据库 > 文章

数据库备份

作者高分内容

更多

《Two Dozen Short Lessons in Haskell》学习（十一）- Tuples 1562 重新理解：ASP.NET 异步编程 1713 JQuery 加载 CSS、JS 文件 2916 ASP.NET WebApi OWIN 实现 OAuth 2.0 2330 Storm概念学习系列之什么是实时流计算？ 1787

相关文章

sysdzw

css动画：文字向上移动并逐渐消失点击按钮显示+1上移淡出

css动画：文字向上移动并逐渐消失点击按钮显示+1上移淡出

306 0

MiyueFE

闲来无事，配合CSS变量搞个Vue数据显示组件吧~

闲来无事，配合CSS变量搞个Vue数据显示组件吧~

56 0

卖坚果的怪叔叔

常见的CSS文字居中显示

常见的CSS文字居中显示

38 0

黛琳ghz

CSS移动端布局和文字溢出显示省略号

文章主要学习使用css文字溢出处理和溢出部分效果的处理

95 0

程序猿v

css：overflow-y: scroll内容未超出也显示滚动条

css：overflow-y: scroll内容未超出也显示滚动条

115 0

程序猿v

通过css将网站页面变为黑白显示

通过css将网站页面变为黑白显示

15 0

python技术君

如何处理 Hybris Accelerator css style 显示不正确的问题

如何处理 Hybris Accelerator css style 显示不正确的问题

25 0

前端歌谣

html+css实战164-溢出显示效果overflow

html+css实战164-溢出显示效果overflow

44 0

前端歌谣

html+css实战158-定位-显示层级

html+css实战158-定位-显示层级

43 0

明金同学

使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置＜span＞和＜a＞标签的样式

使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置＜span＞和＜a＞标签的样式

100 0

+关注

技术小哥哥

文章

问答

作者高分内容

更多

《Two Dozen Short Lessons in Haskell》学习（十一）- Tuples 1562 重新理解：ASP.NET 异步编程 1713 JQuery 加载 CSS、JS 文件 2916 ASP.NET WebApi OWIN 实现 OAuth 2.0 2330 Storm概念学习系列之什么是实时流计算？ 1787

文章排行榜

最热

最新

1 fastjson2为什么这么快 74770

2 7年资深后端带你读懂Redis源码，共总结了这7点心得 67931

3 Meetup 报名丨共话云原生架构升级，微服务x容器开源 Meetup 北京站来啦！ 64526

4 CVPR2021 | 视觉推理解释框架VRX：用结构化视觉概念作为解释网络推理逻辑的「语言」 63516

5 结构化总结与结构化思考之《金字塔原理》总结 56334

6 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 54123

7 C语言题解 | 移除元素(多种解法) 49967

8 jasypt-spring-boot敏感信息加密解密利器使用指南 47661

9 快速开发光伏电站数字孪生运维系统（一） 44669

10 Hive数据倾斜的原因以及常用解决方案 33190

11 高并发编程之阻塞队列 32750

12 Spring 事务【隔离级别与传播机制】 30497

13 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29501

14 计网之初识网络(理解网络传输的基本流程) 28022

15 DataWorks管控台无法配置PAI引擎临时解决方案 42526

16 Android体系课之--LeakCanary内存泄露检测原理解析 25940

17 零基础快速开发Vue图书管理系统—登录注册篇（一） 22688

18 IoT设备数据的存储、解析和价值挖掘实践 22653

19 【实战企业级Java二】渐进式理解Redis分布式锁 22493

20 IoT Studio 物联网可视化应用搭建开发实践 21306

1 关于几天前出的 MinIO 敏感信息泄露漏洞，分享两种扫描方法 81

2 数据备份浅谈 133

3 Flink Table Store 独立孵化启动，Apache Paimon 诞生 366

4 云原生一站式：以PolarDB为代表的阿里云瑶池数据库，带领国产数据库换道超车 148

5 银行卡四要素验证API接口怎么用 61

6 云数据库行业动态【2023年3月版】 139

7 【ASPLOS 2023】图神经网络统一图算子抽象uGrapher，大幅提高计算性能 56

8 【数据库设计与实现】第6章：并发控制 90

9 整理常用ecs命令 56

10 全面分析！ThreadLocal内存泄漏的原因！ 80

11 架构设计：系统时序图 62

12 如何将「知识」体系化管理 4183

13 JVM学习.04. Java内存模型与线程模型 72

14 m基于GRNN神经网络和高阶累积量的信号类型识别matlab仿真 55

15 Flink CDC 专题首发｜每天 10 分钟，解锁新一代数据集成框架 241

16 关于职场晋升，有这些步骤你都了解吗？（附完整指导图） 36147

17 ChatGPT4 给出数据库开发者最容易犯的 10 个错误和解决方案 100

18 性能最大提升60%，阿里云第八代企业级实例ECS g8i正式上线 7427

19 [版本更新]PolarDB-X v2.2.1 生产级关键能力开源升级 140

20 阿里云68元、36元和20.2元域名注册代金券如何领取和使用？ 57

相关课程

更多

前端开发CSS基础

4159

21

去学习

零基础学前端HTML+CSS

8758

57

去学习

CSS 快速掌握

19091

49

去学习

相关电子书

更多

零基础CSS入门教程

立即下载

低代码开发师（初级）实战教程

立即下载

阿里巴巴DevOps 最佳实践手册

立即下载

相关实验场景

更多