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 相关文章推荐
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 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
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
用javascript实现画板的代码
2007/09/05 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js函数排序的实例代码
2013/07/01 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
在python中修改.properties文件的操作
2020/04/08 Python
播音主持女孩的自我评价分享
2013/11/20 职场文书
求职信模版
2013/11/30 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
收款授权委托书
2014/10/02 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
涨价通知
2015/04/23 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python