Home Web Front-end HTML Tutorial How to hide content that overflows the DIV border

How to hide content that overflows the DIV border

Nov 20, 2017 pm 03:30 PM
content overflow frame

When we usually layout, sometimes the content exceeds the width and height of our DIV border, which will cause the web page to be misaligned and messy, which is particularly unsightly and the user experience is extremely poor. How do we hide the overflowing DIV border? What about the content? Today I bring you this tutorial.

CSS style to implement automatic hiding of content that overflows beyond the width and height of the DIV border

Usually when we layout, some text content will exceed the height of the overflow limit, and some Picture will burst the DIV and cause misalignment of the web page.

So we need to solve how to use CSS to automatically hide content that exceeds the set CSS width and CSS height without breaking the DIV layout.

Especially in IE6, if the content exceeds the height and width of the object, it will be burst and increased in height. At this time, we can use the following solutions.

1. Solve the CSS style

At this time we can use CSS overflow style solution:

Corresponding style overflow:hidden

Div{overflow:hidden}
Copy after login

After this setting, if the DIV object is set to a certain width and height, adding overflow:hidden at this time will hide the content including images that exceeds the width and height of the DIV.

Related reading: css implements overflow and displays ellipses for text content that exceeds it

2. Case of hiding excess content

1. Hide text content that exceeds object width and height

If we align the object beautifully in a layout, sometimes we need to set the height and width of the object and then fix it. At this time, we need to ensure that no matter how much content and text there is, the layout will not exceed the set width and height. At this time, we need overflow:hidden to help.

CSS code:

<style> 
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度,同时设置overflow:hidden */ 
</style> 
Html代码:
Copy after login
<p class="pcss5">欢迎,
</p>
Copy after login

Setting overflow:hidden in this way will hide the content that cannot fit outside the set width and height of the object no matter how much content is there.

2. Case of hiding the part of the image that exceeds the width of the object

Here, set an object box with a certain CSS width and CSS height, put a large image, and then use overflow:hidden to hide the excess part. .

Css code

<style> 
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度,同时设置overflow:hidden */ 
</style>
Copy after login

Html code

<p class="pcss5"> 
<img src="http://www.php.cn" /> 
</p>
Copy after login


Set the width and height, although the picture is large

To summarize, If you want the content to not exceed the width and height limits set by the object, you only need to use overflow:hidden to hide the excess parts.

Related reading:

How to set the scroll bar for DIV

How to use CSS to center the DIV

Introduction to how to set DIV scroll bar properties and styles

The above is the detailed content of How to hide content that overflows the DIV border. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to adjust window border settings on Windows 11: Change color and size How to adjust window border settings on Windows 11: Change color and size Sep 22, 2023 am 11:37 AM

Windows 11 brings fresh and elegant design to the forefront; the modern interface allows you to personalize and change the finest details, such as window borders. In this guide, we'll discuss step-by-step instructions to help you create an environment that reflects your style in the Windows operating system. How to change window border settings? Press + to open the Settings app. WindowsI go to Personalization and click Color Settings. Color Change Window Borders Settings Window 11" Width="643" Height="500" > Find the Show accent color on title bar and window borders option, and toggle the switch next to it. To display accent colors on the Start menu and taskbar To display the theme color on the Start menu and taskbar, turn on Show theme on the Start menu and taskbar

How to enable Sensitive Content Warning on iPhone and learn about its features How to enable Sensitive Content Warning on iPhone and learn about its features Sep 22, 2023 pm 12:41 PM

Especially over the past decade, mobile devices have become the primary way to share content with friends and family. The easy-to-access, easy-to-use interface and ability to capture images and videos in real time make it a great choice for creating and sharing content. However, it's easy for malicious users to abuse these tools to forward unwanted, sensitive content that may not be suitable for viewing and does not require your consent. To prevent this from happening, a new feature with "Sensitive Content Warning" was introduced in iOS17. Let's take a look at it and how to use it on your iPhone. What is the new Sensitive Content Warning and how does it work? As mentioned above, Sensitive Content Warning is a new privacy and security feature designed to help prevent users from viewing sensitive content, including iPhone

How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation Mar 04, 2024 pm 01:50 PM

How to change the page that opens the Microsoft Edge browser to 360 navigation? It is actually very simple, so now I will share with you the method of changing the page that opens the Microsoft Edge browser to 360 navigation. Friends in need can take a look. I hope Can help everyone. Open the Microsoft Edge browser. We see a page like the one below. Click the three-dot icon in the upper right corner. Click "Settings." Click "On startup" in the left column of the settings page. Click on the three points shown in the picture in the right column (do not click "Open New Tab"), then click Edit and change the URL to "0" (or other meaningless numbers). Then click "Save". Next, select "

How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method Mar 13, 2024 pm 04:49 PM

CheatEngine is a game editor that can edit and modify the game's memory. However, its default language is non-Chinese, which is inconvenient for many friends. So how to set Chinese in CheatEngine? Today, the editor will give you a detailed introduction to how to set up Chinese in CheatEngine. I hope it can help you. Setting method one: 1. Double-click to open the software and click "edit" in the upper left corner. 2. Then click “settings” in the option list below. 3. In the opened window interface, click "languages" in the left column

How to make custom borders in Microsoft Word How to make custom borders in Microsoft Word Nov 18, 2023 pm 11:17 PM

Want to make the front page of your school project look exciting? Nothing makes it stand out from other submissions like a nice, elegant border on the homepage of your workbook. However, the standard single-line borders in Microsoft Word have become very obvious and boring. Therefore, we show you the steps to create and use custom borders in Microsoft Word documents. How to Make Custom Borders in Microsoft Word Creating custom borders is very easy. However, you will need a boundary. Step 1 – Download Custom Borders There are tons of free borders on the internet. We have downloaded a border like this. Step 1 – Search the Internet for custom borders. Alternatively, you can go to clipping

Popular science on how to set excel borders Popular science on how to set excel borders Mar 20, 2024 am 10:30 AM

It is not uncommon for Excel to appear in our daily work and life. Whether it is the production of employee information, salary tables, or student enrollment information and transcripts, Excel is a relatively easy-to-use tool. When printing Excel, you need to set borders to meet printing requirements. In this article, the editor will introduce you to several ways to set Excel borders. Method 1. Use the function tab button. This should be a method often used by everyone. It is convenient and fast. The specific operation: select the cell area B2:H10 where you need to add a border, click the [Start] tab - [Border] drop-down on the right Button-[All Frames] to complete adding frames. Method 2. Select the cell area B2:H10 where you want to add a border.

Where to set the download button in Microsoft Edge - How to set the download button in Microsoft Edge Where to set the download button in Microsoft Edge - How to set the download button in Microsoft Edge Mar 06, 2024 am 11:49 AM

Do you know where to set the download button to display in Microsoft Edge? Below, the editor will bring you the method to set the download button to display in Microsoft Edge. I hope it will be helpful to you. Let’s follow the editor to learn it! Step 1: First open Microsoft Edge Browser, click the [...] logo in the upper right corner, as shown in the figure below. Step 2: Then click [Settings] in the pop-up menu, as shown in the figure below. Step 3: Then click [Appearance] on the left side of the interface, as shown in the figure below. Step 4: Finally, click the button on the right side of [Show Download Button] and it will change from gray to blue, as shown in the figure below. The above is where the editor brings you how to set up the download button in Microsoft Edge.

How to use CSS to animate the border of an element How to use CSS to animate the border of an element Nov 21, 2023 pm 02:26 PM

How to use CSS to achieve element border animation effects Introduction: In web design, in order to increase the user's visual experience and the attractiveness of the page, some animation effects are often used to make page elements more vivid and interesting. Among them, border animation is a very common effect, which can make the element border change, flicker or flow dynamically. This article will introduce how to use CSS to animate the border of elements and provide specific code examples. 1. Realize the border color change animation To realize the border color change animation effect, you can

See all articles