css文字超出自动显示省略号

只针对单行文本有效;

01.针对块状元素

ul li{
	width: 180px;
	text-overflow: ellipsis;
	white-space: nowrap;/*禁止自动换行*/
	overflow: hidden;
}
  • css文字超出自动显示省略号显示省略号
  • css文字超出自动显示省略号
  • css文字超出自动显示省略号显示省略号

02.针对table

table{
	table-layout:fixed;
}
table td{
	word-break:keep-all;/* 不换行 */
	white-space:nowrap;/* 不换行 */
	overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
	text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
时间 地点 事件
2013/12/19 和讯信息技术有限公司上海分公司 css文字超出自动显示省略号
时间: 2024-07-29 18:53:24

css文字超出自动显示省略号的相关文章

css 文字超出部分显示省略号(原)

单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN{ width: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;} 兼容写法(但是当文字不够长的时候省略号还是会存在,需要js判断一下) #word

关于用css实现的文字超出部分显示省略号

文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <div> <p><span>用css来实现当文字超出宽度时显示省略号的效果</span></p> </div> CSS代码: div{ width: 200px; } span{ display: block; width: 200px; ove

css 控制文字超出部分显示省略号

该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示

css——文字超出范围以省略号(...)显示

css部分: overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; width是一个固定宽度. 对于低版本的Firefox,有两种方法解决. 1.使用jQuery ellipsis plugin插件 $(document).ready(function(){ $('.ellipsis').ellipsis(); } 2.使用ellipsis.xml,并与css文件在同一目录下

多行文本,垂直居中显示,文字超出高度显示省略号

最近项目中遇到多行文本,显示不全想打省略号,块状文本垂直居中显示,功能实现如下, html:结构 <div class="questype-rate"> <ul class="clearfix"> <li> <div class="namebox"> <div class="question-name"> <div class="namerow&quo

css实现超出部分显示省略号

 /* 显示一行,省略号 */     white-space: nowrap;     text-overflow: ellipsis;     overflow: hidden;     word-break: break-all; /* 显示两行,省略号 */  text-overflow: -o-ellipsis-lastline;   overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box;   -webk

html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : clip | elli

【转】html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{     display:block; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : cli

常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis; /* 超出部分显示为... */ 鼠标经过图片放大 .team-img img{ width:188px; height: 200px; border-radius: 50%; transition: all 1.2s; -moz-transition: all 1.2s; -webkit-tr