common css css tips

1. Solution inline- Block elements provided overflow: hidden property resulting in an adjacent row elements offset downwardly

.wrap {
  display: inline-block;
  overflow: hidden
    vertical-align: bottom
} 

2. excess ellipsis 

// {single line of text .Wrap 
                  overflow: hidden; / * exceeding part hide * / 
 text-overflow: ellipsis; / * excess ellipsis * / 
 White-Space: nowrap; / * paragraphs predetermined not wrap text * / 
}

// multi-line text .wrap {

                  width: 100%; overflow: hidden;

                  display: -webkit-box;

                                                                                                                                                                            // object model display box as a resilient and elastic properties must combine * * -webkit-box-orient: vertical ; arrangement arranged telescopically // object sub-element cassette must be combined attributes * * -webkit-line-clamp: ; 3 rows // used to limit the text to be displayed in one block elements Word- BREAK: BREAK-All; // make the browser implemented in any position linefeed * break-all to allow the word wrap *}

Author: Rashomon
link: https: //juejin.im/post/5da3a357f265da5b6723ee1e
Source: Nuggets