Single/multi-line text overflow display ellipsis + clear float

1. Text overflow display ellipsis

(1) Single-line text overflow, only need to set the following style for the container where the text is located:

width:100px; /* The container must be set to a fixed width */     White-space:nowrap; /* force display within a row */     Overflow:hidden; /* Overflow Hide */ /* display ellipsis * /          

Note: Even if you set a high enough height for the container where the text is located, it will be forced into a single-line display.

(2) Multiple lines of text overflow, through my own experiments, summed up the following several methods:

① applies only to browsers of the WebKit kernel, setting the following style for the container where the text is located:

Width:100ox; /* The container must be set to a fixed width */ Display:-webkit-box;-webkit-line-clamp:2; /* force two lines of display */ -webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;

Note: If you set a high enough height for the container where the text is located, you will see a contradictory screen with the remaining text appended to the ellipsis.

② introduced the Clamp.js plug-in, called the JS code as follows:

$clamp ($ (". Container") [0],{clamp:2}); // Notice that you want to change the object under jquery to the corresponding native object

Note: If you set a high enough height for the container above the text, you will also see a contradictory screen with the remaining text appended to the ellipsis.

If you want to learn more about how the Clamp.js plugin is used, please visit https://github.com/josephschmitt/Clamp.js/tree/master

③ introduced the Jquery.dotdotdot.js plug-in (first to introduce jquery.js files), the following is the implementation of the ellipsis after clicking the button to expand the entire content again click to retract the effect, first define the CSS style (the container to set the fixed width and height):

a {text-decoration:none;} . Opened {height:auto;}   . Toggle. close,.opened. Toggle. Open{display:none;}   . Toggle. opened,.opened. Toggle. Close{display:inline;}        

The code for the JS section is as follows:

var$dot = $ ('. Container ')); functioncreatedots () {$dot. Dotdotdot ({after:' A.toggle '      }); }  functiondestroydots () {$dot. Trigger (' Destroy ');  } createdots (); $dot. On (' Click ', ' A.toggle ',function() {$dot. Toggleclass (' Opened ' ); if($dot. Hasclass (' opened ') ) {destroydots (); } Else{createdots (); }      return false;      }); 

Note: You must set a certain height for the container where the text is located and less than the height that normally accommodates the entire text content, or the ellipsis will not appear.

2. Clear floating

(1) If there is a sibling relationship between the target elements, add clear:both to the following elements

(2) If the target element is a parent-child relationship, there are several implementation methods:

① set a fixed height for the parent element

② Add Overflow:hidden to the parent element;

③ set an empty label below the floating element, i.e.

<style= ' Width:100%;height:0;clear:both;overflow:hidden '></ Div >

④ adds a pseudo-element to the parent element, i.e.

:: after {Display:block; content: "."; Clear:both}

⑤ if IE6 still have to add zoom:1 to the parent element

Single/multi-line text overflow display ellipsis + clear float