css控制文字显示长度 超过用省略号替代
这样节省了服务器的开销,减轻服务器压力;这部分工作由客户端完成了,而且代码维护起来也方便了。
text-overflow 属性
CSS3 text-overflow 属性:
http://www.w3school.com.cn/cssref/pr_text-overflow.asp
来张效果图:
一般还配合这个属性一块使用
overflow: hidden;
white-space: nowrap;
CSS3 text-overflow 属性:
http://www.w3school.com.cn/cssref/pr_text_white-space.asp
日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br>强制换行。
表格里使用text-overflow后不能隐藏超出的文本的解决方法
http://www.jb51.net/css/145465.html
<!DOCTYPE html>
<html>
<head>
<style>
td{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
border:1px solid;
}
table{
border-collapse: collapse;
border:1px solid;
table-layout:fixed;
}
td:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>
</head>
<body>
<table width="500" height="20" >
<tr>
<td width="20%" height="20">将将建军节建军节将建军节建军节积极急急急急急急急急急急急急急急急积极急急急急急急急急急急急急急急急</td>
<td width="80%" height="20">节建军节积极急急急急急急急急急急急急急急急积极急急急急急急</td>
</tr>
<tr>
<td width="20%" height="20">将将建军节建军节将建军节建军节积极急急急急急急急急急急急急急急急积极急急急急急急急急急急急急急急急</td>
<td width="80%" height="20">节建军节积极急急急急急急急急急急急急急急急积极急急急急急急</td>
</tr>
<tr>
<td width="20%" height="20">将将建军节建军节将建军节建军节积极急急急急急急急急急急急急急急急积极急急急急急急急急急急急急急急急</td>
<td width="80%" height="20">节建军节积极急急急急急急急急急急急急急急急积极急急急急急急</td>
</tr>
</table>
</body>
<html>
效果图:
分享到:
相关推荐
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……
纯css 控制超出宽度部分用省略号显示,纯数字跟连续的英文字母请绕行。
CSS实现长标题用省略号显示,以前用JS用网络语言实现,其实CSS也可以的 不错哦~
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...
代码如下: ... ;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;...我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
CSS实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width,但是可以设置table的width
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
CSS实现多行文字显示省略号效果.zip
table中的内容经常超过了我们固定的td长度,这个css控制td的内容,如果超过了td长度则自动隐藏超过长度的字符,显示... 鼠标移过时,显示完整的td信息。
CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有...
css文本显示省略号 如果不适应sass 需要把@extend .text-webkit-box替换为.text-webkit-box里面的内容
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号
兼容火狐css控制超出部分用省略号代替
javascript 实现文本使用省略号替代 实现效果图: 如果图片不清晰,建议放大浏览器的尺寸进行查看 1.这里是配合jQuery来进行替换的,所以jquery还是必备的,毕竟是轻量级,而且对各大的浏览器兼容性也好。所以开始页面...
一、CSS样式 解决文字过长显示省略号问题 1、一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果。这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题。 <!DOCTYPE html> <...
列表由于标题过长而影响美观度,所以想让标题溢出的文字以省略号方式表现.此类文章网上会有很多,本文整理了一些经验技巧与大家共同分享,感兴趣的你可不要错过了哈,希望可以帮助到你