Because of the need for page typesetting, there are some places that require too long a problem plus an ellipsis. For example: the title limits the width of 20 Chinese, and the excess is replaced with an ellipsis. Before the use of procedures to intercept the method, but using CSS to intercept more conducive to SEO.
Here's how to use it:
<div class= "title" > Display an ellipsis when text overflows within an object </div>
This is an example, in fact, we only need to display the following length:
CSS implementation of the text in the page too long intercept ...
TheTitle class should write this:
. title{width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
Description:
1, width must be set, can be adjusted according to actual needs.
2, White-space:nowrap is prohibited text wrapping.
3, Text-overflow Indicates whether an ellipsis is displayed when text overflows, with two values:
Clip: Do not show ellipsis (...). ), but simply cut.
Ellipsis: Displays an ellipsis (...) when text in an object overflows.4, Overflow:hidden indicates that the overflow content is hidden.
Example effect diagram:
#FormatImgID_0 #
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" 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 Instead of showing the ellipsis, the simple trim bar
</div>
<div class= test_demo_ Ellipsis
Display ellipsis when text overflows within an object
</div>
</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
