How to understand overflow and related attribute text-overflow in CSS attribute

This article mainly introduces "how to understand overflow and related attributes text-overflow in CSS attributes". In daily operation, I believe many people have doubts about how to understand overflow and related attributes text-overflow in CSS attributes. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to understand overflow and related attributes text-overflow in CSS attributes". Next, please follow the editor to study!

1. Overflow

Specifies how to display content that cannot be contained in the box.

1. Scope of application: block level elements

two。 Available values:

Visible: do not cut the content (default).

Hidden: content that exceeds the size of the object is cropped, and no scroll bars appear.

Scroll: clips content that exceeds the size of the object and displays the excess in the form of a scroll bar.

Auto: crop the content and add scroll bars as needed, which is the default value for body objects and textarea.

3. Description:

For table, if the table-layout property is set to fixed, the td object supports the overflow property with a default value of hidden. If set to hidden,scroll or auto, content beyond the size of the td will be cut. If set to visible, it will cause additional text to overflow to cells on the right or left (depending on the direction property setting).

2. Related attributes:

1.overflow-x:

Overflow is horizontally oriented

2.overflow-y:

Overflow is vertically oriented.

3.text-overflow:

Horizontally, specify how the text is displayed when it overflows, and which side of the omitted mark is determined by the text direction

1) available values:

Clip: do not show ellipsis marks (… ) to cut off the spillover

Ellipsis: displays the ellipsis mark (… )

Strings: any string (supported by FF)

2) premise of use:

Block level element

Set the width (not set based on the width of the browser window)

Overflow:hidden;// overflow hiding

White-space:nowrap;// forbids line breaking

3) description:

a. When the container is floated or positioned, the width of the container must be set in order to have an ellipsis

b. For Firefox browsers, you can set the text-overflow to display any string to replace the ellipsis, such as text-overflow: "& &".

At this point, the study on "how to understand overflow and related attributes text-overflow in CSS attributes" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!