1. For example, the input cursor is very large, covering the text, and setting the cursor to have a certain distance between the text and the text. You can set letter-spacing: 5px for the input css;
2. CSS implements single-line, multi-line text overflow display...
/*单行溢出*/
.one-txt-cut{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
// Of course, the width attribute needs to be added to be compatible with partial browsing.
/*Multi-line overflow mobile terminal use*/.txt-cut{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 2; */
-webkit-box- orient: vertical;
}
3. Make pictures and texts uncopyable
-webkit-user-select: none; -ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;
4. Change the font color size of the placeholder (the mobile terminal does not take effect)
input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333;}
input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333;}
input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px; color: #333;}
5. The box is centered vertically and horizontally
1. The width and height of the positioning box are known
父：position: relative;
Child: position: absolute; left: 50%; top: 50%; margin-left: - half width of itself; margin-top: - half height of itself;
2, table-cell layout
父： display: table-cell; vertical-align: middle;
Child: margin: 0 auto;
3. Positioning + transform; suitable for sub-boxes with irregular width and height;
父：position: relative
子：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
4. flex layout
Parent: display: flex; /* implement vertical centering*/align-items: center; /* implement horizontal centering*/justify-content: center;
5. Black Technology
父：position: relative;
子：position: absolute; top:0;left:0;right:0;bottom:0; margin:auto;
5. Add another horizontal center: margin-left: 50%; transform: translateX(-50%);