2020 February 27, today is cloudy! A morning learned a little front-end theory, intended to put a summary of knowledge about, and then write yesterday tcp packet capture changed a bit.
(A) text overflow handling
Single-line text and multiline text, and then we look at Baidu's handling code.
Hand written! Why be so lazy! Let us look at Taobao, found no ... case, the content of the text is very pure ah! Now the sites are generally found in the case of the back-end control word, write directly on the ...
- Single-line treatment: white-space: nowrap can not let it wrap, overflow: hidden Let overflow partially hidden, text-overflow: ellipsis; overflow section in accordance with the show ...
This is the original renderings; 
this is the final result - Treatment multi-line: Under normal circumstances the pc is hand-written, multi-line general do truncation process, the parent element in the overflow: hidden; pay attention to the relationship between height and line-height, do not appear to intercept half word results.
(B) the background image processing
1.background-size: a background image in a predetermined display width and height
2.background-repeat: no-repeat image display will not be repeated
for example:
3.background-positon: 100px be left 100%!
(3) The enterprise project development experience
when our speed is not good when you only load html, css and javascript will be automatically shielded, even so must ensure the realization of functions, such as:
Under normal circumstances, Taobao words It does not appear, because the load css overflow: hidden;
1. less sophisticated approach:
let the words out and then hide Taobao
- Advanced practice (background will act on the padding)
container height of 0, using padding-top distraction, and then hide
to see what use Taobao
is clearly the second, really advanced.
(Iv) complementary
sides of the blank 1. Taobao, parent-child elements are block Magin: Auto 0,
2. internal principle: Position: absolute and float: left / right display is automatically added elements: inline-block attribute
3. alignment: the text element occurs generally aligned with the bottom
Vertical-alin: adjusting alignment line
