Home >Web Front-end >HTML Tutorial >Compilation of common tips in front-end development_html/css_WEB-ITnose
Compilation of common tips in front-end development_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:27800browse
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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn