Continue to extract long text to display ellipsis (multiple lines)

Continue to extract long text to display ellipsis (multiple lines)
In fact, the mobile page received such a requirement a few days ago. I thought this was not feasible. My colleague told me that the-webkit-line-clamp attribute was okay and I checked it, sure enough, there is basically no such requirement on the Pc end, because the compatibility of this method is too poor, and the browser share is not the biggest share of webkit (especially tianchao). You can see that only webkit kernel is supported by the prefix, it belongs to the Internal Attributes of webkit, and is similar to-webkit-text-size-adjust: none (this Pc is no longer supported and can be used on mobile terminals), but it is different on mobile terminals, currently, mobile terminals are basically the world of ios and Android. This attribute is still very useful. You only need to add a max-height to WP and Firefox OS to prevent text overflow, but there will be no ellipsis, if you do not need to support the above two max-height values, you do not need. <P> I want to implement multiline text wrapping. I want to implement multiline text wrapping. to implement multiline text wrapping, I want to implement multiline text wrapping. I want to implement multiline text wrapping. I want to implement multiline text wrapping. text wrap I want to implement multi-Line Text wrap I want to implement multiline text wrap I want to implement multiline text wrap I to wrap multiple lines of text </p>, copy the code p {overflow: hidden; text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webki T-box-orient: vertical;} copy the code-webkit-line-clamp to be matched with the two attributes of overflow: hidden text-overflow: ellipsis and extended condensation model display: -webkit-box-orient: vertical, four rows are 4, five rows are 5... Of course you want all browsers to achieve consistent performance, it has to rely on js, using the height of the comparison with the replacement of the regular to achieve, the instance link http://jsbin.com/vefeb/4/ copy code $ (". text "). each (function (I) {var divl = $ (this ). height (), $ p = $ ("p", $ (this )). eq (0); while ($ p. outerHeight ()> divl) {$ p. text ($ p. text (). replace (/(\ s) * ([a-zA-Z0-9] + | \ W )(\. \. \.)? $ /,"..."));};});