CSS超出文本指定宽度用省略号代替和文本不换行


Posted in HTML / CSS onMay 05, 2016

一般的文字截断(适用于内联与块):

CSS Code复制内容到剪贴板
  1. .text-overflow {   
  2.     display:block;/*内联对象需加 */  
  3.     width:31em;/* 何问起 hovertree.com */  
  4.     word-break:keep-all;/* 不换行 */  
  5.     whitewhite-space:nowrap;/* 不换行 */  
  6.     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */  
  7.     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/  
  8. }   

对于表格文字溢出的定义:
 
对于表格超出范围显示省略号

CSS Code复制内容到剪贴板
  1. table{   
  2.      width:em;   
  3.      table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */  
  4.  }   
  5.  td{   
  6.     width:%;   
  7.     word-break:keep-all;/* 不换行 */  
  8.     whitewhite-space:nowrap;/* 不换行 */  
  9.     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */  
  10.     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/  
  11. }   

需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。

这个写法只有IE会有“...”,其它的浏览器文本超出指定宽度时会隐藏。

以上所述是针对CSS超出文本指定宽度用省略号代替和文本不换行的相关介绍,希望对大家有所帮助,同时也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 #HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 #HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 #HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 #HTML / CSS
CSS3过渡transition效果实例介绍
May 03 #HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 #HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 #HTML / CSS
You might like
新闻分类录入、显示系统
2006/10/09 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
Using the TextRange Object
2006/10/14 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
详解vue axios二次封装
2018/07/22 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python远程邮件控制电脑升级版
2019/05/23 Python
利用Python计算KS的实例详解
2020/03/03 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
个人能力自我鉴赏
2014/01/25 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
天网工程实施方案
2014/03/26 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
Go gorilla/sessions库安装使用
2022/08/14 Golang