DIV 테두리를 넘는 콘텐츠를 숨기는 방법

일반적으로 레이아웃할 때 콘텐츠가 DIV 테두리의 너비 및 높이 제한을 초과하는 경우가 있는데, 이로 인해 웹 페이지가 잘못 정렬되고 지저분해지며, 이는 특히 보기 흉하고 사용자 경험이 극도로 열악합니다. DIV 테두리를 넘는 콘텐츠가 있나요? 오늘은 이 튜토리얼을 가져왔습니다.

CSS 스타일을 사용하여 DIV 테두리의 너비와 높이를 초과하는 콘텐츠를 자동으로 숨기는 방법

보통 레이아웃할 때 일부 텍스트 콘텐츠는 한계를 초과하는 높이를 초과하고 일부 사진은 DIV를 버스트하고 웹페이지 정렬이 잘못된 사고를 발생시키세요.

그래서 우리는 CSS를 사용하여 DIV 레이아웃을 깨지 않고 설정된 CSS 너비와 CSS 높이를 초과하는 콘텐츠를 자동으로 숨기는 방법을 해결해야 합니다.

특히 IE6에서는 콘텐츠가 object의 높이와 너비를 초과하는 경우 늘어나서 높이가 증가합니다. 이때 다음 솔루션을 사용할 수 있습니다.

1. CSS 스타일을 해결합니다

이때 CSS를 사용할 수 있습니다 overflow스타일 솔루션:

해당 스타일 Overflow:hidden

Div{overflow:hidden}

이렇게 설정한 후 DIV 객체가 특정 너비와 높이를 설정하면 , Overflow:hidden을 추가하면 이미지를 포함하여 DIV의 너비와 높이를 초과하는 콘텐츠가 숨겨집니다.

관련 읽기: CSS는 오버플로를 구현하고 텍스트 내용을 초과하여 줄임표를 표시합니다.

2. 초과 내용을 숨기는 경우

1. 개체의 너비와 높이를 초과하는 텍스트 내용 숨기기

레이아웃에서 개체를 아름답게 정렬하면 때로는 객체를 설정해야 합니다. 높이와 너비는 고정되어 있습니다. 이때 콘텐츠와 텍스트가 아무리 많아도 레이아웃이 설정된 너비와 높이를 초과해서는 안 된다는 점을 인식해야 합니다. 오버플로 도움말:숨겨짐.

CSS 코드:

<style> 
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style> 
Html代码：

<p class="pcss5">欢迎，
</p>

Set Overflow:hidden 이렇게 하면 콘텐츠가 아무리 많이 설정되어도 개체는 설정된 너비와 높이를 벗어나 들어갈 수 없는 콘텐츠를 숨깁니다.

2. 이미지에서 객체의 너비를 초과하는 부분을 숨기는 경우

여기서는 특정 CSS 너비와 CSS 높이로 객체 상자를 설정하고 큰 이미지를 넣은 다음 Overflow:hidden을 사용하여 숨깁니다. 과잉 부분.

Css code

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

Html code

<p class="pcss5"> 
<img  src="/static/imghwm/default1.png"  data-src="http://www.php.cn"  class="lazy"   / alt="DIV 테두리를 넘는 콘텐츠를 숨기는 방법" > 
</p>

그림이 크더라도 너비와 높이를 설정하세요

요약하자면 콘텐츠가 개체에 설정된 너비와 높이 제한을 초과하지 않도록 하려면 다음을 수행하세요. 초과분을 숨기려면 Overflow:hidden 만 사용해야 합니다. 초과분만 숨기세요.

관련 읽기:

DIV에서 스크롤 막대를 설정하는 방법

CSS를 사용하여 DIV를 중앙에 배치하는 방법

DIV 스크롤 막대 속성 및 스타일을 설정하는 방법 소개

위 내용은 DIV 테두리를 넘는 콘텐츠를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!