Use CSS to control character length and display length

In the Web page layout design, will encounter the text exceeds the fixed length causes the whole page distortion situation. Programmers often need to intercept fixed lengths to achieve certain fixed-length controls. This paper introduces a method of directly using CSS code control to realize text interception, which is different from the direct character interception of programmers, and its advantage is that it can automatically control the length of text display; The disadvantage is that the compatibility of different browsers is not perfect.

With the three main attributes of the Overflow,text-overflow,white-space, the other code is a cosmetic function.

CSS code:

<style>. Texthidden{width:200px;Overflow:Hidden;Text-overflow:ellipsis;White-space:nowrap;Border:1px solid #ddd;}</style>

HTML code:

<class= "Texthidden">    CSS hides the contents of the overflow part of the container </  div>

Code Analysis:

1. width:200px; Specify width:
2. Overflow:hidden; will be out of content hidden
3. Text-overflow:ellipsis; ie private attribute, text overflow display ellipsis mark (); Other browsers are not supported.
4. White-space:nowrap; Forces the content to be wrapped without wrapping. Forces all text to be displayed in the same line until the text ends or encounters a BR element

At present, the successful example of using this method is the content display of Gmail, which achieves the best effect under IE. If it is FF that is worse, there will always be the effect of intercepting half of Chinese. The main reason for this is that the Text-overflow property is only valid under IE, there are many CSS properties, especially the two attributes of margin and padding, which often lead to different effects on the page. You need to be aware of the effects of these properties on different browsers.