The article provides three methods for controlling whether the title of an article is too long. The following three css tutorials control the ellipsis (ie, ff) display code, and the last two are compatible with ie, firefox.
Div {
Width: 200px;/* basic definition of the container */
Height: 200px;
Background-color: # eee;
}
/* Style under ie */
P span {
Display: block;
Width: 200px;/* defines the width. Modify the width as needed */
Overflow: hidden;
White-space: nowrap;
Text-overflow: ellips tutorial is;
}/* Ff style */
P {clear: both ;}
P span {float: left;
Max-width: 175px;
}
P: after {
Content :"...";
}
Instance
<! 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> css implementation method for displaying ellipsis over a specific length </title>
<Style type = "text/css">
Ul {width: 200px; margin: 50px auto ;}
Li {width: 200px; line-height: 25px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;}
A {color: # 03c; font-size: 13px ;}
A: hover {color: #000 ;}
</Style>
</Head>
<Body>
<Ul>
<Li> <a href = "/htmldata/2007-10-16/1192526505. html"> Barbie Photo color, psproduction process </a>
<Li> <a href = "/htmldata/2007-10-11/1192115032. html"> photo processing ps allows you to easily create beautiful and brilliant star mm special effects photos. </a>
<Li> <a href = "/htmldata/2007-09-13/1189681483. html"> In the photoshop tutorial, you can easily create a special effect for beautiful women in old photos. </a>
<Li> <a href = "/htmldata/2007-09-13/1189653291. html"> Image processing photoshop adds true shadows and light separation to photos. </a>
<Li> <a href = "/htmldata/2007-08-31/1188554851. html"> photoshop easily draws cute personalized heart-shaped images for photos. </a>
<Li> <a href = "/htmldata/2007-08-29/1188380812. html"> flash Tutorial: simple implementation of as to draw the besell curve </a>
</Ul>
</Body>
</Html>
Instance 3
. Ellipsis a {display: block; width: 300px; overflow: hidden; white-space: nowrap;-o-text-overflow: ellipsis ;}
/* Firefox only */
. Ellipsis: not (p) {clear: both ;}
. Ellipsis: not (p) a {max-width: 300px; float: left ;}
. Ellipsis: not (p): after {content: "..."; float: left; width: 25px; padding-left: 1px ;}
<Div class = "ellipsis"> <a href = ""> In the years after the conquest, Tikar himself stepped onto the path of aggression and expanded his sphere of influence throughout Maya. </A> </div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
