CSS control text displays only one line, and the ellipsis is displayed beyond the section

<style= "width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" >           omit me!          Omit me!          Omit me!          Omit me!          Omit me!          Omit me!          Omit me!          Omit me!          Omit me!          Omit me!          Omit me!          Omit me!  </p>

1, text-overflow:ellipsis;  

The main style here is text-overflow:ellipsis;

However, Text-ellipsis is a special style, the explanation is this: the Text-overflow property is only annotations, and if the text overflows, the ellipsis is displayed. No other style attribute definitions are available.

The effect of an ellipsis on overflow must also be defined: Force text to appear on one line (white-space:nowrap) and overflow content to be hidden (Overflow:hidden), only in this way can overflow be achieved

The text displays the effect of the ellipsis.

The simple understanding is that I want to limit the text to one line (white-space:nowrap;), that the line is bound (width), and that the part of your overflow should be hidden (overflow:hidden;),

Then an ellipsis (text-overflow:ellipsis) appears.

I see a lot of people on the Internet that opera does not support Text-overflow, perhaps because I use the latest version of the property has been supported, so there is no way to test, but online to support the lower version of opera

One way, is-o-text-overflow:ellipsis; As for Firefox, there are many people say that do not support, the version of the problem can not be verified, we have tried to testify,

Here is a "how to use CSS in Firefox to limit the number of words and display in the form of dots", you can refer to

2. White-space

By the way, explain the use of white-space.

The White-space property declares how to handle whitespace in an element during layout creation. (nonsense, the whitespace here should mean we use the keyboard to type the space or enter, because with or <br> regardless of white-space

What you set will have spaces or carriage returns. ）

The following are the possible values for White-space on Wschool:

Normal default. The blank will be ignored by the browser.

The pre blank is reserved by the browser. It behaves like a <pre> tag in HTML.

The nowrap text does not wrap, and the text continues on the same line until the <br> tag is encountered.

Pre-wrap preserves a sequence of whitespace characters, but wraps normally.

Pre-line merges a sequence of whitespace characters, but preserves newline characters.

Inherit specifies that the value of the White-space property should be inherited from the parent element

CSS control text displays only one line, and the ellipsis is displayed beyond the section