Several tips on force display of a row

When the World Cup opens, there may be fewer blog updates recently. After all, articles can be written at any time. The World Cup is only once every four years. What's more, this is wonderful.
Today I have sorted out some CSS tips, some of which are commonly used, some are not commonly used, some are simple, and some are tedious. In fact, it doesn't matter whether you can remember these things. It's important to know where to find them when necessary.

Force a line to display:

text-overflow: ellipsis;white-space: nowrap;overflow: hidden;

Force line feed display:

If a long English word appears in a line of text, it may cause the text content to be out of the container range. Although the width has been set for the container, the browser will not wrap the text before it encounters a space. Add the following attributes for the container. you can separate the words to force a line break.

word-wrap: break-word;word-break: break-all;

 

Clear floating:

/** First define a class, which is named clear **/. clear: After {clear: Both; content :'. '; display: block; visibility: hidden; Height: 0 ;}. clear {display: inline-block;} * HTML. clear {Height: 1% }. clear {display: block}

<! --- After the above work is completed ---> <! --- Add clear to the class attribute of the container to easily clear the floating ---> <Div class = "clear"> <Div style = "float: left "> </div> <Div style =" float: Right "> </div>

Implement image pre-loading with pure CSS

By defining an image as the element background to CSS and writing the element into the page, you can implement image pre-loading. This is a simple but practical tips. Every project may be used. For example, the small icon in Ajax loading cannot be loaded when Ajax is requested.

#preloadedImages {width: 0px;height: 0px;display: inline;background-image: url("path");}

CSS property hack:

color:red;/* Not IE */color:blue\9; /* IE */color:orange\0; /* IE 8-9 */+color:gold; /* IE 7 */*color:black; /* IE 6-7 */_color:pink; /* IE 6 */