39. Introduce BFC and its application

Juejin. Cn/post / 692649…

How do I center a div horizontally and vertically

(1) positioning + moving (2) positioning +transform (3) positioning special writing (TOP :0; bottom:0; left:0; right:0; Margin: auto;) (3) Flex (4) table-cell+inline-blockCopy the code

The advantages and disadvantages of opacity: 0, visibility: hidden, display: none and applicable scenarios are compared

Juejin. Cn/post / 692655…

(1) DOM structure (2) event listening (3) performance (4) inheritance (5) TransitionCopy the code

60, Given the following code, how to change the width of the image to 300px? Note that the following code cannot be modified juejin.cn/post/692655…

68. How to solve the 1px pixel problem of mobile Retina display?

Juejin. Cn/post / 692865…

127, How to use CSS or JS to implement multi-line text overflow ellipsis effect, considering compatibility

<style> .box { width: 100px; height: 60px; background: chocolate; / /* overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; </style> <body> <div class="box"> </div>Copy the code

Conclusion:

(1) Single-line text

  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
Copy the code

(2) Multi-line text

  display: -webkit-box
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;    
Copy the code