"Go" How to use CSS to limit the length of text, so that the overflow of the content with an ellipsis ... Show

Article transferred from here http://blog.0755hqr.com/post-597.html

PS: Because in the place do not see the reprint button, copy the next to save here for their own convenience, others can see help is more willing to, the effect of pro-test can be achieved, compatible with IE, Google, Firefox

Due to the uncertainty of the length of the text content, and the layout accuracy of the page, if the text content beyond the limited area (Div,span, etc.), the page will deform. In order to satisfy the layout of the page reasonable, with CSS style automatically limit the length of text, so that overflow content with ellipsis ... Show.

CSS styles that limit the length of text are as follows:

. Text_overflow{width:320px;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden ;}

This style is compatible with the ie,chrome,safari,opera,firefox6+ version, but is not compatible with the low Firefox version.
To be compatible with a lower version of Firefox you need to add a file: Ellipsis.xml, the content is as follows:

<?xml version= "1.0" encoding= "UTF-8"? ><bindings  xmlns= "HTTP://WWW.MOZILLA.ORG/XBL"  xmlns:xbl= " HTTP://WWW.MOZILLA.ORG/XBL "  xmlns:xul=" Http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul ">  <binding id= "ellipsis" >    <content>      <xul:description crop= "End" xbl:inherits= "VALUE=XBL : Text ">        <children/>      </xul:description>    </content>  </binding></ Bindings>

After that, the CSS style is modified as follows:

. text_overflow{width:320px;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;-moz-binding: URL (' ellipsis.xml#ellipsis '); Overflow:hidden;}

"Go" How to use CSS to limit the length of text, so that the overflow of the content with an ellipsis ... Show