容器溢出处理属性css
CSS | 溢出属性 (CSS | overflow Property)
The overflow property in CSS is used to specify what happens when CSS content overflows the element box.
CSS中的overflow属性用于指定当CSS内容溢出元素框时发生的情况。
Syntax:
句法：
Element {
overflow: overflow value;
}
Below are some values for overflow property,
以下是溢出属性的一些值 ，
overflow:wrap
溢出：换行
overflow:scroll
溢出：滚动
overflow-x and overflow-y
溢出x和溢出y
overflow:visible
溢出：可见
overflow:hidden
溢出：隐藏
overflow:auto
溢出：自动
Let's know about them now.
现在让我们知道它们。
1)溢出：包装 (1) overflow:wrap)
overflow-wrap tells a browser that it can break a line of text inside a targeted element onto multiple lines in an otherwise unbreakable place.
overflow-wrap告诉浏览器，它可以将目标元素内的一行文本拆分为原本不会损坏的多行。
This property is specified as a single keyword chosen from the list of values below,
该属性被指定为从以下值列表中选择的单个关键字，
normal: Lets a word overflow if it is longer than the line.
normal ：如果单词长于行，则使单词溢出。
break-word: It splits a word into multiple lines, if necessary.
break-word ：如有必要，它将一个单词分成多行。
inherit: Inherits the parent element's value for this property.
Inherit ：继承此属性的父元素的值。
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
background: red;
width: 50%;
height: 100px;
overflow-wrap: normal;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>
Output
输出量
In the above example, a normal overflow property in applied that lets the word overflow.
在上面的示例中，应用了普通溢出属性 ，该属性使单词溢出。
2)溢出：滚动 (2) overflow: scroll)
This property is used to scroll the available content with scrolling to view overflowing content.
此属性用于通过滚动查看可用内容来滚动可用内容。
Most desktop browsers will display both horizontal and vertical scrollbars, whether or not any content is clipped. This can avoid problems with scrollbars appearing and disappearing in a dynamic environment.
无论是否剪切任何内容，大多数桌面浏览器都会显示水平和垂直滚动条。 这样可以避免滚动条在动态环境中出现和消失的问题。
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
background: yellow;
width: 50%;
height: 100px;
border: 2px solid blue;
overflow: scroll;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>
Output
输出量
In the above example, the overflow scroll property is applied to the element that allows it to be scrollable if the content doesn't fit.
在上面的示例中， 溢出滚动属性应用于元素，如果内容不合适，该元素将使其可滚动。
3)溢出x和溢出y (3) overflow-x and overflow-y)
These two properties work similarly as the overflow property and accept the same values. The overflow-x parameter works only on X or left-to-right axis. The overflow-y works on Y or top-to-bottom axis.
这两个属性与溢出属性的工作方式相似，并且接受相同的值。 参数overflow-x仅在X轴或从左到右的轴上有效。 y轴在Y轴或上下轴上起作用 。
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
width: 100px;
height: 200px;
border: 2px solid blue;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>
Output
输出量
In the above example, overflow-x and overflow-y property is applied to hidden so the content in both directions is cut.
在上面的示例中，将overflow-x和overflow-y属性应用于隐藏，因此将剪切两个方向上的内容。
4)溢出：可见 (4) overflow:visible)
This property is used when the content is not clipped and will be rendered outside the content box if it exceeds its container size.
当内容没有被裁剪时，将使用此属性；如果内容超出其容器大小，则将在内容框外呈现该属性。
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
width: 300px;
height: 100px;
border: 2px solid blue;
overflow: visible;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>
Output
输出量
In the above example, the overflow visible property allows the content more than the size of the element to be visible to us.
在上面的示例中， 溢出可见属性允许内容大于元素的大小对我们可见。
5)溢出：隐藏 (5) overflow:hidden)
This property is used when the overflow is clipped, and the rest of the content is hidden.
当剪辑了溢出并且隐藏了其余内容时，将使用此属性。
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
width: 300px;
height: 100px;
border: 2px solid blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is not built for business purposes, but it is built for spreading education
about programming languages and to help learners who are determinant to learn new technologies.
</div>
</body>
</html>
Output
输出量
In the above example, the overflow hidden property hides the content that is more than the size of the element.
在上面的示例中， overflow隐藏属性隐藏的内容大于元素的大小。
6)溢出：自动 (6) overflow:auto)
The CSS overflow:auto property is same as the overflow:scroll property but the difference is that auto property adds the scrollbars only when they are necessary.
CSSoverflow：auto属性与overflow：scroll属性相同，不同之处在于auto属性仅在必要时才添加滚动条。
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
width: 300px;
height: 100px;
border: 2px solid blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
</div>
<br/>
<div class="element1">
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
This site is built to provide help to students, professionals and job seekers.
We are trying to make each tutorial simple to learn and understand.
</div>
</body>
</html>
Output
输出量
In the above example, the scrollbars are not added as they are not necessary.
在上面的示例中，未添加滚动条，因为它们不是必需的。
翻译自: https://www.includehelp.com/code-snippets/overflow-property-in-css.aspx
容器溢出处理属性css
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
