CSS The overflow Property

粉丝

2小时前2小时

行政经理

CSS The overflow Property

The CSS overflow Property

The CSS overflow property controls what happens to content that is too big to fit into an area.

It specifies whether to clip the content or to add scrollbars when the content of an element is too big.

The overflow property has the following values:

visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content is hidden
scroll - Scrollbars are added. User must scroll to see all content
auto - Similar to scroll, but adds scrollbars only when necessary

Here, scrollbars are added on overflow:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Try it Yourself »

CSS overflow: visible

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Example

div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}

Try it Yourself »

CSS overflow: hidden

With the hidden value, the overflow is clipped, and the rest of the content is hidden:

Example

div {
overflow: hidden;
}

Try it Yourself »

CSS overflow: scroll

With the scroll value, horizontal and vertical scrollbars are always added. User must scroll to see all content:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Example

div {
overflow: scroll;
}

Try it Yourself »

CSS overflow: auto

The auto value is similar to scroll, but it adds scrollbars only when necessary:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Example

div {
overflow: auto;
}

Try it Yourself »

All CSS Overflow Properties

Property	Description
overflow	Specifies what happens if content overflows an element's box
overflow-anchor	Makes it possible to turn off scroll anchoring
overflow-x	Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y	Specifies what to do with the top/bottom edges of the content if it overflows the element's content area
overflow-wrap	Specifies whether or not the browser can break lines with long words, if they overflow its container

★ +1

引用

参与讨论

你可立刻发布并稍后注册。如果你有帐户，立刻登录发布帖子。

粉丝

转到主题列表

CSS Grid Items
CSS Grid Items

Cavalry发布主题在教程

CSS Grid Items CSS Grid Items A grid container contains one or more grid items. All direct child elements of a grid container automatically become grid items. Below is a grid container with five grid items: 1 2 3 4 5 Try it Yourself » CSS Sizing/Spanning Grid Items A grid item can span over mulitiple columns or rows. We can specify where to start and end a grid item by using the following properties: grid-column-start - Specifies on which column-line the grid item will start grid-column-end - Specifies on which column-line the grid item will end grid-column - Shorthand property for grid-column-start and grid-column-end grid-row-start - Specifies on which row-line the grid item will start grid-row-end - Specifies on which row-line the grid item will end grid-row - Shorthand property for grid-row-start and grid-row-end The lines between the columns in a grid are called column-lines, and the lines between the rows in a grid are called row-lines. We can refer to line numbers when placing a grid item in a grid container. CSS grid-column-start and grid-column-end The grid-column-start property specifies on which column-line the grid item will start. The grid-column-end property specifies on which column-line the grid item will end. Example Let the first grid item start at column-line 1, and end on column-line 3: .item1 { grid-column-start: 1; grid-column-end: 3; } Result: 1 2 3 4 5 Try it Yourself » The CSS grid-column Property The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties. Example Let the first grid item start at column-line 1, and let it span 2 columns: .item1 { grid-column: 1 / span 2; } Result: 1 2 3 4 5 Try it Yourself » CSS grid-row-start and grid-row-end The grid-row-start property specifies on which row-line the grid item will start. The grid-row-end property specifies on which row-line the grid item will end. Example Let the first grid item start at row-line 1, and end on row-line 3: .item1 { grid-row-start: 1; grid-row-end: 3; } Result: 1 2 3 4 5 Try it Yourself » The CSS grid-row Property The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties. Example Let the first grid item start at row-line 1, and let it span 2 rows: .item1 { grid-row: 1 / span 2; } Result: 1 2 3 4 5 Try it Yourself » Combine grid-column and grid-row Here we use both the grid-column and grid-row properties to let a grid item span both columns and rows. Example Let the first grid item start at column-line 1, and let it span 2 columns, also let the first grid item start at row-line 1, and let it span 2 rows: .item1 { grid-column: 1 / span 2; grid-row: 1 / span 2; } Result: 1 2 3 4 5 6 Try it Yourself » All CSS Grid Item Properties Property Description align-self Aligns the content for a specific grid item along the column axis grid-area A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties grid-column A shorthand property for the grid-column-start and the grid-column-end properties grid-column-end Specifies where to end the grid item grid-column-start Specifies where to start the grid item grid-row A shorthand property for the grid-row-start and the grid-row-end properties grid-row-end Specifies where to end the grid item grid-row-start Specifies where to start the grid item justify-self Aligns the content for a specific grid item along the row axis place-self A shorthand property for the align-self and the justify-self properties ★ +1 Sign in to track progress
- 2小时前2小时
- 0篇回复
CSS Grid Container
CSS Grid Container

Cavalry发布主题在教程

CSS Grid Container CSS Grid Container A grid container contains one or more grid items arranged in columns and rows. All direct child elements of a grid container automatically become grid items. An element becomes a grid container when its display property is set to grid or inline-grid. 1 2 3 4 5 Try it Yourself » Display Grid Property The <div> element becomes a grid container when its display property is set to grid or inline-grid. Example Use display: grid to make a block-level grid container: .container { display: grid; } Result: 1 2 3 4 5 Try it Yourself » Example Use display: inline-grid to make an inline grid container: .container { display: inline-grid; } Result: 1 2 3 4 5 Try it Yourself » CSS Grid Container Properties Property Description align-content Vertically aligns the grid items inside the container align-items Specifies the default alignment for items inside a flexbox or grid container display Specifies the display behavior (the type of rendering box) of an element column-gap Specifies the gap between the columns gap A shorthand property for the row-gap and the column-gap properties grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-auto-columns Specifies a default column size grid-auto-flow Specifies how auto-placed items are inserted in the grid grid-auto-rows Specifies a default row size grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties grid-template-areas Specifies how to display columns and rows, using named grid items grid-template-columns Specifies the size of the columns, and how many columns in a grid layout grid-template-rows Specifies the size of the rows in a grid layout justify-content Horizontally aligns the grid items inside the container place-content A shorthand property for the align-content and the justify-content properties row-gap Specifies the gap between the grid rows ★ +1 Sign in to track progress
- 2小时前2小时
- 0篇回复
CSS Text Effects
CSS Text Effects

Cavalry发布主题在教程

CSS Text Effects CSS Text Effects CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes. In this chapter you will learn about the following properties: text-overflow - Specifies how to handle overflowed content word-wrap - Allows long words to be able to be broken and wrap onto the next line word-break - Specifies line breaking rules writing-mode - Specifies whether lines of text are laid out horizontally or vertically CSS text-overflow Property The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped or rendered with ellipsis (...). Both of the following properties are required for text-overflow to take effect: white-space: nowrap; overflow: hidden; Here, the overflowed content is clipped: This is some long text that will not fit in the box Here, the overflowed content is rendered with ellipsis (...): This is some long text that will not fit in the box The CSS code is as follows: Example p.test1 { width: 200px; border: 1px solid #000000; white-space: nowrap; overflow: hidden; text-overflow: clip; } p.test2 { width: 200px; border: 1px solid #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Try it Yourself » The following example shows how you can display the overflowed content when hovering over the element: Example p:hover { overflow: visible; } Try it Yourself » CSS word-wrap Property The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line. If a word is too long to fit within an area, it expands outside: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. The CSS code is as follows: Example Allow long words to be able to be broken and wrap onto the next line: p { word-wrap: break-word; } Try it Yourself » CSS word-break Property The CSS word-break property specifies how words should break when reaching the end of a line. This property can take one of the following values: normal - This is default. Uses the default line breaking rules of the language break-all - Allows words to be broken at any character to prevent overflow keep-all - Prevents words from breaking Here, we use normal: This paragraph contains some text. This line will-break-at-hyphens. Here, we use break-all: This paragraph contains some text. The lines will break at any character. The CSS code is as follows: Example p.test1 { word-break: normal; } p.test2 { word-break: break-all; } Try it Yourself » CSS writing-mode Property The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically. This property can take one of the following values: horizontal-tb - Default. The text flows horizontally from left to right, vertically from top to bottom vertical-rl - The text flows vertically from top to bottom, horizontally from right to left vertical-lr - The text flows vertically from top to bottom, horizontally from left to right Here is a text with a span element with a vertical-rl writing-mode. The following example shows some different writing modes: Example p.test1 { writing-mode: horizontal-tb; } span { writing-mode: vertical-rl; } p.test2 { writing-mode: vertical-rl; } Try it Yourself » CSS Text Effect Properties The following table lists the CSS text effect properties: Property Description text-justify Specifies how justified text should be aligned and spaced text-overflow Specifies how overflowed content that is not displayed should be signaled to the user word-break Specifies line breaking rules for non-CJK scripts word-wrap Allows long words to be able to be broken and wrap onto the next line writing-mode Specifies whether lines of text are laid out horizontally or vertically ★ +1 Sign in to track progress
- 2小时前2小时
- 0篇回复

CSS The overflow Property

推荐的帖子

CSS The overflow Property

The CSS overflow Property

CSS overflow: visible

Example

CSS overflow: hidden

Example

CSS overflow: scroll

Example

CSS overflow: auto

Example

All CSS Overflow Properties

参与讨论

动态

CSS Grid Items

CSS Grid Container

CSS Text Effects

24 小时内在线的用户 1

帐户

导航

搜索

配置浏览器推送通知

Chrome (安卓)

Chrome (台式电脑)

Safari (iOS 16.4+)

Safari (macOS)

Edge (安卓)

Edge (台式电脑)

Firefox (安卓)

Firefox (台式电脑)