1. Control the display and omission of the excess part (single line):
white-space: nowrap;text-overflow:ellipsis;overflow: hidden;
The following uses the css3 part to control the display and omission of the excess part of multiple lines (applicable here) Equipped with Google kernel browser):
overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;/* 设置最高值，防止超出部分显示出来 */max-height: 30px;
2. To achieve transparent label background and opaque content:
background: rgba(255,255,255,0.6)!important;
3. Call the server-side font:
@font-face{ font-family: "自定义字体名"; src:url('自定义字体名.ttf')format('opentype'); /* 指定自定义字体的格式 */ } span{ font-family: "自定义字体名"; font-size: 36px; }
4. Use css3 to implement gradient color (adapt to Google here) Kernel browser):
.shade{ width: 300px; height: 100px; /* 对背景实现渐变 */ background: -webkit-gradient(linear,0 0 ,0 100%,from(rgba(255, 255, 255, 0.1)),to(rgba(255, 163, 204, 0.5))); }
5.css3 to achieve vertical and horizontal centering of images (this is adapted 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"> <img src="1.jpg" alt=""> </div></body>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
