phpStudy
phpStudy
网站首页
软件下载
PHP教程
编程技术
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
window
Linux
Mac
ASP
服务器
CMS
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
PostgreSQL
SQLite
教程手册
php
html
html5
css
css3
JavaScript
ajax
jquery
sql
ado
asp
aspnet
browsers
careers
dhtml
dotnetmobile
dtd
e4x
glossary
hosting
htmldom
json
media
msnet
quality
rdf
rss
schema
semweb
site
sitemap
smil
soap
svg
tags
tcpip
vbscript
w3c
wap
web
webservices
wmlscript
wsdl
xforms
xhtml
xlink
xml
xmldom
xpath
xquery
xsl
xslfo
网站测速
小皮面板
智能dns
搜索
首页
PHP教程
CSS 超出隐藏实现限制字数的功能代码(多浏览器)
CSS 超出隐藏实现限制字数的功能代码(多浏览器)
CSS限制字数
复制代码
代码如下:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; /* for IE */
-o-text-overflow: ellipsis; /* for Opera */
-icab-text-overflow: ellipsis; /* for iCab */
-khtml-text-overflow: ellipsis; /* for Konqueror Safari */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
-webkit-text-overflow: ellipsis; /* for Safari,Swift*/
看了 上面的代码挺郁闷的,根本实现不了,看来好多站长对这种简单的代码都不测试就发了,郁闷。所以我们特别发一下我们自己用的,但firefox不兼容但可以使用,没有省略号。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>phpStudy_www.phpstudy.net</title> <base onmouseover="window.status='欢迎到phpStudywww.phpstudy.net';return true"> <meta http-equiv="x-ua-compatible" content="ie=7" /> <meta name="robots" content="all" /> <meta name="author" content="dxy | www.phpstudy.net" /> <meta name="Copyright" content="Copyright (c) 2006-2008 phpstudy.net" /> </head> <body> <div style="white-space:nowrap; width:200px; height:20px; line-height:20px; text-overflow:ellipsis;-moz-text-overflow: ellipsis; overflow:hidden">phpStudy是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所。</div> </body> </html>
提示:您可以先修改部分代码再运行
下面是用js实现的通过计算数字的长度进行截取的,但对于中文跟英文一样算一个,是肯定不行的了,phpStudy以前发布过js计算字符串长度的,中文算两个字符的文章,可以参考下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS test</title> <style type="text/css"> *{ margin:0; padding:0; } body{ padding:10px; font-family:Arial; } #ididid{ width:150px; line-height:20px; overflow:hidden; border:1px solid #999; } </style> </head> <body> <script type="text/javascript"> function testAuto(thisId,needLeng){ var ididid = document.getElementById(thisId); var nowLeng = ididid.innerHTML.length; if(nowLeng > needLeng){ var nowWord = ididid.innerHTML.substr(0,needLeng)+'...'; ididid.innerHTML = nowWord; } } </script> <div id="ididid">12345678901234567890test test test test test test test test test test test test test test test test test test test test test test test</div> <script type="text/javascript"> testAuto('ididid',15) </script> </body> </html>
提示:您可以先修改部分代码再运行
这个是css after实现的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" c> <title>css把超出的部分显示为省略号的方法兼容火狐_phpStudy_www.phpstudy.net</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } a:hover { text-decoration: none; color: #000; } ul { width: 300px; margin: 40px auto; padding: 12px 4px 12px 24px; border: 1px solid #D4D4D4; background: #F1F1F1; } li { margin: 12px 0; } li a { display: block; width: 80px; overflow: hidden;/*注意不要写在最后了*/ white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } /* firefox only */ li:not(p) { clear: both; } li:not(p) a { max-width: 170px; float: left; } li:not(p):after { content: "..."; float: left; width: 25px; padding-left: 5px; color: #000; } </style> </head> <body> <ul> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> </ul> </body> </html>
提示:您可以先修改部分代码再运行
参考文章:
http://www.phpstudy.net/article/15239.htm
http://www.phpstudy.net/article/14210.htm
«
»
PHP教程
PHP简介
PHP基本语法
PHP类型
PHP变量
PHP运算符
PHP控制结构
PHP函数
PHP类与对象
PHP异常处理
函数库分类
快速导航
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
Linux
Mac
ASP
服务器
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
SQLite
wamp
交通频道
Copyright © 2016 phpStudy | 豫ICP备2021030365号-3