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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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 操作excel文件的方法小结
2009/12/31 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
python运行其他程序的实现方法
2017/07/14 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python发展史及网络爬虫
2019/06/19 Python
Python with语句和过程抽取思想
2019/12/23 Python
Python reversed函数及使用方法解析
2020/03/17 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
承诺书怎么写
2014/03/26 职场文书
食品安全演讲稿
2014/09/01 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书