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的@media来编写响应式的页面
Nov 01 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 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
php中去除所有js,html,css代码
2010/10/12 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
django中的ajax组件教程详解
2018/10/18 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
Python中List.index()方法的使用教程
2015/05/20 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android