We will introduce a jQuery smart cut-off text and prompt effect code of a specified length. For more information, see this article. You can download the jquery plug-in package by yourself.
The Code is as follows: |
Copy code |
<! 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> <Title> jQuery intelligently truncates texts and prompts of a specified length </title> <Meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <Style type = "text/css"> Ul {margin: 0; padding: 0 ;} Ul li {list-style: none ;} . Div {width: 200px; float: left; display: inline ;} . Div ul li {width: 220px; padding: 0px 6px; line-height: 25px; height: 25px; margin-top: 1px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis ;} </Style> <Script type = "text/javascript" src = "/ajaxjs/jquery1.3.2.js"> </script> <Script type = "text/javascript"> $ (Function (){ $ (". Div ul li"). hover (function (e ){ Var x = e. pageX; Var y = e. pageY; Var div = $ ("<div id = 'div _ show'> </div> "); Var text=((this#.html (); $ (This). append (div ); $ ("# Div_show" ).html(text).css ({"height": "25px", "position": "absolute", "zIndex": "99", "backgroundColor ": "#38F758", "whiteSpace": "nowrap", "paddingLeft": "15px", "paddingRight": "15px", "top ": y + 10 + "px", "left": x + 10 + "px "}); $ ("This"). children ("# div_show"). show (); }, Function (){ $ (This). children ("# div_show"). remove (); }) }) </Script> </Head> <Body> An error is prompted during preview. Refresh the page. This problem does not occur in actual use. <Br> <Div class = "div"> <Ul> <Li> some people say that IE9 is the second revolution of Microsoft </li> <Li> Well, now HTML5 is popular. I will add HTML5 to its title. </li> <Li> the Raphael js library was heard at the webrebuild Meeting </li> <Li> let's take a brief look at the css appearance mentioned above </li> <Li> after Mozilla releases several Firefox 3.7 preview versions </li> <Li> media type (media type) is a very useful attribute in css 2 </li> </Ul> </Div> </Body> </Html> |