A workaround for a table that cannot hide beyond the text after using Text-overflow

When the Text-overflow is set to ellipsis text overflow content can be displayed as an ellipsis, and set as clip can be the text overflow part of the cut off, but in the table after using Text-overflow still can not hide beyond the text, the specific solution Xiang see this article.

In W3cschool CSS3 has a text-related property Text-overflow, when it is set to ellipsis text overflow content can be displayed as an ellipsis, and set as clip can be the text overflow part of the cut off, of course, if you set two properties, That is white-space:nowrap (forcing text to appear on one line) and Overflow:hidden (overflow content is hidden), that is, to have

If you do not want the ellipsis to appear, set the height (height is the height of a line of text) and remove White-space:nowrap (this method is incompatible if the label is TD IE8)

{    width: **px;    Height: **px;    Overflow:hidden; }

　　

Because it has been useful for many times this property, and the use is also very smooth, so recently in some table when encountered in the TD content too much and the appearance of a line to affect the overall aesthetic problem, so I want to text does not wrap and let the text can be displayed as an ellipsis, So I will be very natural to use the above three properties and also for the TD set the length and width, the result of God is odd, has not been beyond the text to the ellipsis, try to exclude a variety of I think there is a possibility of the impact can still not solve, so I had to go to Google, and then finally found the reason, is to define a property in the table style table-layout:fixed, in order to solve the table inside the use of text-overflow still can not hide the text beyond the problem, you must use the following properties of the full

You can also nest a span or div tag in the TD, set it on the label

span{    Display:block;    Width: **px;    Height: **px;    White-space:nowrap;    Overflow:hidden;     Text-overflow:ellipsis;}

And if you want to show the hidden text content when you move the mouse, you can also set

　　

--------------------------------------------------------------------------------------------------------------- ------------------------------------------

　　

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 the text to appear on one line (white-space:nowrap) and overflow content as hidden (Overflow:hidden), only in order to achieve the effect of overflow text display ellipsis.

The simple understanding is that I want to limit the text to a single line (white-space:nowrap;), that the line is bound (width), and that the portion of your overflow is to be hidden (overflow:hidden;), and then the ellipsis is present (Text-overflow : ellipsis).

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;

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 refer to the space we typed with the keyboard or carriage return, because with or <br> whatever white-space set will have a space or carriage return.) ）

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.

A workaround for a table that cannot hide beyond the text after using Text-overflow