DIV를 초과하는 콘텐츠를 숨기는 방법

일반적으로 웹 페이지를 레이아웃할 때 텍스트 내용이 너무 많아서 한계를 초과하는 문제가 항상 발생합니다. 그런 다음 일부 사진이 DIV를 터뜨리고 웹 페이지를 어지럽고 어수선하게 만들 것입니다. 그러면 문제를 어떻게 해결합니까?

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

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

CSS 스타일에 대한 솔루션

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

해당 스타일 Overflow:hidden

Div{overflow:hidden}

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

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

초과 내용 대/소문자 숨기기

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

레이아웃에서 아름답게 정렬하는 경우 때로는 설정이 필요합니다. 객체의 높이와 너비는 그 이후에 수정되었습니다. 이때 콘텐츠와 텍스트가 아무리 많아도 레이아웃이 설정된 너비와 높이를 초과해서는 안 된다는 점을 인식해야 합니다. 오버플로:숨겨짐.

CSS 코드:

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

Html 코드:

<div class="div">欢迎，

여기에서 CSS를 배우고 필요한 리소스를 다운로드할 수 있습니다.

동시에 FAQ답변 content

메소드는 Overflow:hidden을 이렇게 설정하는데, 콘텐츠가 아무리 많아도 객체는 설정된 너비와 높이를 넘어서는 콘텐츠를 숨깁니다.

여기서 특정 CSS 너비와 CSS 높이로 개체 상자를 설정하고 큰 이미지를 배치한 다음 Overflow:hidden을 사용하여 초과된 부분을 숨깁니다.

Css code

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

Html code

<div class="div"> 
<img  src="/static/imghwm/default1.png"  data-src="http://www.php.cn"  class="lazy"   / alt="DIV를 초과하는 콘텐츠를 숨기는 방법" > 
</div>

그래서 콘텐츠가 개체에 설정된 너비와 높이 제한을 초과하지 않도록 하려면 Overflow:hidden을 사용하여 초과된 부분을 숨기면 됩니다.

오버플로 숨겨진 팁이 너무 많습니다. 더 흥미로운

기타

관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요! 관련 읽기:

HTML에서 DIV를 사용하는 방법

HTML5

태그 사용 방법

html 문서 유형 선언 작성 방법

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