Text-overflow: the ellipsis attribute is usually used to hide text beyond the length, and add a ellipsis at the end of the text.
456 bereastreet: if a new layer (for example, move the mouse to the drop-down menu and the drop-down menu content is displayed) appears during webpage interaction, of course, the text content will be covered by the new pop-up content, but the ellipsis does not. It appears on the new layer.
You can use Firefox to open the Demo to see the specific effect.
The code is as follows: |
Copy code |
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> Firefox and the magical text-overflow: ellipsis z-index demo page | Lab | 456 Berea Street </title> <Style media = "screen, print"> @ Import '/css/lab.css '; # Body { Width: 70em; Max-width: 100%; Margin: 0 auto; } . Text { Width: 180px; Overflow: hidden; Text-overflow: ellipsis; Margin-top: 1em; White-space: nowrap; } # Cover { Position: absolute; Width: 200px; Height: 100px; Border: 2px solid #999; Background: # fff; } </Style> </Head> <Body> <Div id = "body"> <H1> Firefox and the magical text-overflow: ellipsis z-index demo page <P> This is a demo document related to the article <a href = "/archive/201305/firefox_and_the_magical_text-overflowellipsis_z-index/"> Firefox and the magical text-overflow: ellipsis z-index </a>. please see the article for context and information. </p> <Div id = "cover"> </div> <P class = "text"> This text will overflow its container. This text will overflow its container. </p> <Div id = "labfooter"> <P> <a href = "/lab/"> Lab Index </a >|< a href = "/"> 456 Berea Street Home </a> | Copyright &# 169; 2003-2013 Roger Johansson </p> </Div> </Div> <Script src = "/js/jquery-1.9.1.min.js"> </script> <Script> $ (Function (){ $ ('<Button> Toggle cover </button>'). on ('click', function (){ $ ('# Cover'). toggle (); }). InsertBefore ($ ('# cover ')); }); </Script> </Body> </Html> |
If you have encountered this problem, the solution is very simple. You just need to assign a value greater than 1 to the z-index attribute of the new pop-up cover layer. This will solve the problem. In the Demo above, you can use Firebug to add it.