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

php中世界最好的语言
풀어 주다: 2017-11-23 14:17:32
원래의
4834명이 탐색했습니다.

일반적으로 웹 페이지를 레이아웃할 때 텍스트 내용이 너무 많아서 한계를 초과하는 문제가 항상 발생합니다. 그런 다음 일부 사진이 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="http://www.php.cn" /> 
</div>
로그인 후 복사

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

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

기타

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

HTML에서 DIV를 사용하는 방법

HTML5
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿