<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <title>css Write Ellipsis method </title> <style> UL { width:300px; width of/*ul * * margin:40px Auto; padding:12px 4px 12px 24px; border:1px solid #D4D4D4; Background: #F1F1F1; List-style:none; } Li { MARGIN:12PX 0; } /* IE Only * * Li a { Display:block; width:220px; /* Li Width This control shows how many words to display after ... If the width is greater than the number of words, it will not show ... The * * 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; /* Only FF identification * * Float:left; } Li:not (P): after { Content: "..."; Float:left; width:25px; padding-left:5px; Color: #000; } </style> <body> <ul> <li><a href= "#" > Design staff must read: Impact SEO page Production details </a></li> <li><a href= "#" > Design staff must read: Impact SEO page Production details </a></li> <li><a href= "#" > Design staff must read: Impact SEO page Production details </a></li> <li><a href= "#" > Design staff must read: Impact SEO page Production details </a></li> <li><a href= "#" > Design staff must read: Impact SEO page Production details </a></li> <li><a href= "#" > Design staff must read: Impact SEO page Production details </a></li> <li><a href= "#" > Design staff must read: Impact SEO page Production details </a></li> </ul> </body> |