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学习心得分享
Aug 19 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python二分查找算法的递归实现方法
2016/05/12 Python
PyQT实现多窗口切换
2018/04/20 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
大学军训自我鉴定
2013/12/15 职场文书
银行学习十八大感想
2014/01/11 职场文书
个人查摆剖析材料
2014/10/04 职场文书
2014年纪委工作总结
2014/12/05 职场文书
行政上诉状范文
2015/05/23 职场文书
爱国主义电影观后感
2015/06/18 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python