Home > Developer > JavaScript
Tips commonly used in front-end development and tips for front-end development
1. the excess part is shown as omitted (single row ):
white-space: nowrap;text-overflow:ellipsis;overflow: hidden;
The following uses css3 to control the display of the excess part of multiple rows (this is applicable to Google's kernel browser ):
Overflow: hidden; text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;/* set the maximum value, prevent display of excess parts */max-height: 30px;
2. The label background is transparent and the content is not transparent:
background: rgba(255,255,255,0.6)!important;
3. Call the server Font:
@ Font-face {font-family: "Custom fonts"; src: url ('custom fonts. ttf') format ('opentype ');/* specify the Custom font format */} span {font-family: "Custom font name"; font-size: 36px ;}
4. Use css3 for gradient (applicable to Google's kernel browser ):
. Shade {width: 300px; height: 100px;/* gradient of the background */background:-webkit-gradient (linear, 0 0, 0 100%, from (rgba (255,255,255, 0.1), to (rgba (255,163,204, 0.5 )));}
5.css 3 enables vertical and horizontal center of images (applicable to Google and Firefox kernel browsers ):
<style type="text/css"> .content{ display: box; display: -webkit-box; display: -moz-box; -webkit-box-pack:center; -moz-box-pack:center; -webkit-box-align:center; -moz-box-align:center; border: 1px solid red; width: 600px; height: 500px; }</style><body> <div class="content"> </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
