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打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 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中函数的形参与实参的问题说明
2010/09/01 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php判断变量类型常用方法
2012/04/24 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
详解Nodejs内存治理
2018/05/13 NodeJs
了解JavaScript中的选择器
2019/05/24 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
django表单的Widgets使用详解
2019/07/22 Python
python中return如何写
2020/06/18 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
大学生求职信例文
2014/06/29 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
送达通知书
2015/04/25 职场文书
关于分班的感言
2015/08/04 职场文书
解析MySQL binlog
2021/06/11 MySQL
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL