CSS Common pits

1, text overflow display ellipsis: 1.1 Single-line text,

1{2     overflow: hidden;  3     white-space: nowrap;  4     text-overflow: ellipsis;  5 }

More than 1.2 lines of text,

1 . Intwoline{2 Display:-webkit-box!important;3 Overflow:Hidden;4 Text-overflow:ellipsis;5 Word-break:Break-all;6 -webkit-box-orient:Vertical;7 -webkit-line-clamp:2;//How many lines8}

2, the indefinite width of the horizontal vertical center 2.1, directly set on the element

1{2position: absolute;  3Top: 50%; 4 Left: 50%; 5 z-index: 3; 6 -webkit-transform: translate ( -50%,-50%);  7 } 　　 　　 　　 　　 　　

2.2, set on the parent container

1 . Parent {2justify-content: centent; //Sub-element is centered horizontally 3 align-items: Center;   //Sub-element vertically centered 4display: -webkit-flex; 5 } 　　 　　 　　

3. Not selectable

1{2     -webkit-user-select: none;  3     -moz-user-select: none;  4     -ms-user-select: none;  5 }

4, beyond the display ellipsis, text wrapping4.1. Table:

1 Table{2 Table-layout:fixed;3}4 TD{5 width:100%;6 Word-break:Keep-all;//No Line break7 White-space:nowrap;//No Line break8 Overflow:Hidden;9 Text-overflow:ellipsis;//show ellipsis when text inside object overflowsTen}

4.2, Div, Li compatible ie/firefox/chrome

1 Div, Li   {2    display:block;  3    white-space:nowrap;  4    overflow:hidden;  5    text-overflow:ellipsis;  6 }

4.3, the relevant knowledge points word-break:break-all; When the content is in English, as long as there is no space, it will be treated as a word, so it will not be wrapped, plus this type will break the automatic line wrapping.　　White-space:nowrap; Word-wrap:break-word; Force not to break the line word-break:normal; automatic line wrapping word-break:break-all; forcing English words to break 5, CSS to draw a solid circle

1 . Redpoint{2 width:10px;3 Height:10px;4Background-color: #f00;5 Border-radius:5px;6 -moz-border-radius:5px;7 -webkit-border-radius:5px;8 position:Absolute;9  Right:-10px;Ten Top:1px; One}

Case:

&LT;TD style= "Position:relative" > Young chanting Poetry <span class= "Redpoint" ></span></td> parent element Add Position: Relative, when the child element sets the right property to negative, the red dot can change position with the text length, and if the table element has width:100% style, it can be wrapped with the span label, adding style= "position:relative" <td ><span style= "position:relative" > Chant poetry <span class= "Redpoint" ></span></span></td > 6, Mask Layer

1 . Masklyayer{2 position:Absolute;3 Top:0;4  Left:0;5 Z-index:1;6 width:100%;7 Height:100%;8 Opacity:0.6;9 Filter:Alpha (opacity=60);Ten Background-color:#000; One} A . Div{ - position:Absolute; - Top:50%; the  Left:50%; - Z-index:2; - Transform:Translate ( -50%, -50%); - -ms-transform:Translate ( -50%, -50%); + -moz-transform:Translate ( -50%, -50%); - -webkit-transform:Translate ( -50%, -50%); + -o-transform:Translate ( -50%, -50%); A}

CSS Common pits