css内容溢出显示点点_CSS溢出-照顾额外的内容

css内容溢出显示点点

There are times, when the content inside an element is more, which leads to content overflowing outside the element. CSS overflow property allows us to handle the overflowing content either by hiding it or by adding a scroll bar to the element.

有时，元素内的内容更多，这会导致内容在元素外溢出。 CSS overflow属性允许我们通过隐藏溢出内容或向元素添加滚动条来处理溢出内容。

The overflow property can have the following values:

溢出属性可以具有以下值：

1. visible → This is the default value. In this case, no action is taken on the overflowing content and it is visible outside the element as well.

   visible →这是默认值。 在这种情况下，不会对溢出的内容采取任何措施，并且在元素外部也可以看到它。

2. hidden → In this case, the overflowing content, which is outside the element becomes invisible i.e. it is hidden.

   hidden →在这种情况下，元素外部的溢出内容将变得不可见，即被隐藏。

3. scroll → In this case, a scroll bar is added to the element, hence allowing it to hold all the content in it.

   scroll →在这种情况下，滚动条将添加到元素，因此允许其在其中保留所有内容。

4. auto → If the content is less, this acts like visible but as the content starts to overflow outside, this property starts acting like scroll and adds a scroll bar to the element.

   auto →如果内容较少，则此行为类似于visible内容，但是当内容开始向外部溢出时，此属性将开始像scroll一样，并向元素添加滚动条。

By default all the HTML tags are auto adjusting i.e. they can grow to infinite height and can hold all the content. But the need of overflow property arises, in case of fixed height elements.

默认情况下，所有HTML标签都是自动调整的，即它们可以增长到无限的高度并可以容纳所有内容。 但是，在固定高度元素的情况下，需要overflow属性。

溢出可见overflow:visible (Overflow Visible overflow:visible)

This is the default value, and allows the content to overflow out of an element of fixed height.

这是默认值，并允许内容从固定高度的元素溢出。

div {
    width: 300px;
    height: 50px;
    background-color: #cccccc;
    /* setting overflow visible */
    overflow: visible;
}

Live Example →

现场示例→

溢出隐藏overflow:hidden (Overflow Hidden overflow:hidden)

This value of the overflow property, hides the extra content which is flowing outside the element by making it invisible.

overflow属性的此值通过使元素不可见来隐藏正在元素外部流动的多余内容。

div {
    width: 300px;
    height: 50px;
    background-color: #cccccc;
    /* setting overflow hidden */
    overflow: hidden;
}

Live Example →

现场示例→

溢出滚动overflow:scroll (Overflow Scroll overflow:scroll)

This value of the overflow property, introduces a scroll bar to the element, as content starts to overflow. Hence no content is hidden, you can easily scroll using the scroll bar and see the complete content.

当内容开始溢出时， overflow属性的此值将滚动条引入到元素。 因此，没有内容被隐藏，您可以使用滚动条轻松滚动并查看完整内容。

div {
    width: 300px;
    height: 50px;
    background-color: #cccccc;
    /* setting overflow scroll */
    overflow: scroll;
}

Live Example →

现场示例→

溢出自动overflow:auto (Overflow Auto overflow:auto)

This value of the overflow property, acts as default till the content is less, as content starts to overflow, this acts like scroll.

overflow属性的此值用作默认值，直到内容减少为止，当内容开始溢出时，此行为类似于scroll 。

div {
    width: 300px;
    height: 50px;
    background-color: #cccccc;
    /* setting overflow auto */
    overflow: auto;
}

Live Example →

现场示例→

有关溢出的更多信息... (More about Overflow...)

We can even control the overflow property differently for horizontal and vertical overflow using overflow-x and overflow-y property. As you must have noticed in the last Live Example, on adding overflow:scroll both horizontal and vertical scroll bars are introduced.

我们甚至可以使用overflow-x和overflow-y属性来控制水平和垂直溢出的overflow-x属性。 正如您在上一个实时示例中已经注意到的那样，在添加overflow:scroll同时引入了水平和垂直滚动条。

div {
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: scroll; /* Add vertical scrollbar */
}

Live Example →

现场示例→

翻译自: https://www.studytonight.com/cascading-style-sheet/css-overflow

css内容溢出显示点点