When the content exceeds the container, it is necessary to use the overflow attribute of the CSS. Common scenarios include too long pop-up windows, truncated card information, and displaying some content in fixed height areas. How to use: 1.overflow: visible default overflow displays external; 2.overflow: hidden hides overflow content; 3.overflow: scroll always displays scroll bars; 4.overflow: auto displays scroll bars when auto exceeds. To achieve the ellipsis effect, you need to cooperate with other attributes: use white-space: nowrap and text-overflow: ellipsis to achieve single line omission, and use -webkit-line-clamp scheme or pseudo-element simulation for multiple lines omissions.

Sometimes the page content is too much and the layout is broken. At this time, you need to use the CSS overflow attribute to handle overflow content. It helps you control whether to hide, scroll or leave it alone when the content exceeds the container.

When do you need to use overflow?

When you set a fixed height or width for an element, or use max-width / max-height , it is easy to "run out" as much content. For example, if there are too many texts in a card component, or if a fixed-size pop-up window cannot be installed, these situations can be controlled by overflow .

Common scenarios include:

• The pop-up content is too long and needs to be scrolled
• Card information truncated to display ellipsis
• Only some content is displayed in the fixed height area

At this time, you need to consider adding an overflow attribute to the container.

Overflow Common values and uses

CSS's overflow supports several commonly used values, each with different effects:

• visible (default): The content will not be cropped and will be displayed outside the box
• hidden : Exceeding the part directly hides
• scroll : Scroll bars are displayed regardless of whether the content is exceeded or not
• auto : The scroll bar will be displayed only if the content exceeds the content, and if it does not exceed the content, it will not be displayed.

For example, if you want a div to automatically appear after the content exceeds the content, you can write it like this:

 .box {
  width: 200px;
  max-height: 100px;
  overflow: auto;
}

If you just want the content not to overflow and don't want the user to scroll to view it, use overflow: hidden; .

What should I do if I want the text to overflow and display the ellipsis?

It is not enough to just use overflow: hidden; it is necessary to cooperate with other attributes to achieve the effect of "...". Commonly, single-line omission:

 .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

If multiple lines are omitted, you can use -webkit-line-clamp :

 .multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Note that this method has good compatibility, but not all browsers are natively supported. If compatibility requirements are high, pseudo-elements can also be used to simulate ellipses.

Basically that's all. Although overflow looks simple, it is very practical in actual layout. The key is to understand the behavioral differences between different values and how to use them in conjunction with other attributes.

The above is the detailed content of Managing overflow content with css overflow property. For more information, please follow other related articles on the PHP Chinese website!