Home > Developer > Web Develop
Compatible with Firefox, Opera, chrome text overflow add ellipsis function, as if previously shared several code,
However, the compatibility of browsers has not been considered before, now the compatibility of the major browsers are doing well,
When the text or character outside the outer div, automatically hide and add the ellipsis, for the front-end development, this is a pretty good CSS effect bar.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> text overflow add ellipsis </title>
<style type= "Text/css" >
. Textoverflow a {
Display:block;
width:120px;
margin:0px 0px 0px 3px;
White-space:nowrap;
Overflow:hidden;
Float:left;
-o-text-overflow:ellipsis; /* for Opera */
Text-overflow:ellipsis; /* for IE */
}
. textoverflow:after {
Content: "...";
}
/* for Firefox */
@media all and (min-width:0px) {
. textoverflow:after {
Content: "";
}
/* for Opera */
}
</style>
<body>
<div class= "Textoverflow" >
<a> green white pig grazing on the blue lawn </a>
</div>
</body>
Add ellipsis at CSS text overflow
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
