<div class= "title" > Display ellipsis when text overflows in objects </div>
This is an example, in fact we only need to display the following length:
CSS implementation of the page text too long interception ...
The title class should write this:
. title{width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
Description
1, the width must be set, can be adjusted according to the actual needs.
2, White-space:nowrap is prohibited text folding line.
3. Text-overflow Indicates whether an ellipsis is displayed when text overflows, with two values:
Clip: Do not display the ellipsis tag (...). ), but a simple cut.
Ellipsis: Displays ellipsis (...) when text inside an object overflows. ）
4, Overflow:hidden indicates that overflow content is hidden.
Example Effect diagram:
Sample code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD";
<meta http-equiv= "Content-type" content= " text/html; Charset=utf-8 "/>
<title>text-overflow</title>
<body>
<style Type= "Text/css";
test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px ; Background: #ccc;}
test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background : #ccc;}
</style>
<div class= "Test_demo_clip";
& nbsp Do not display ellipsis, but simple trim bar
</div>
<div class= "Test_demo_ Ellipsis
Display ellipsis
</div> when text inside an object overflows;
</body>
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
