DIV 요소의 오버플로 감지

이 글에서는 CSS 및 HTML 설정 내에서 세로 텍스트 오버플로를 확인하는 방법에 대해 자세히 알아봅니다.

다음 CSS 및 HTML 코드를 고려하세요.

div.rounded { 배경 - 색상 : #FFF ; 높이 : 123px ; 너비 : 200px ; 글꼴 - 크기 : 11px ; 오버플로: 숨김; }

div.rounded {
  background-color: #FFF;
  height: 123px;
  width: 200px;
  font-size: 11px;
  overflow: hidden;
}

  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet.

DIV 요소의 텍스트가 오버플로되었는지 확인하려면 JavaScript를 사용할 수 있습니다. 다음 스크립트는 요소의 스크롤 높이를 해당 clientHeight:

function GetContainerSize()와 비교합니다. var 컨테이너 = document.getItemById("tempDiv"); var 메시지 = "패딩이 포함된 콘텐츠의 너비: 컨테이너.스크롤 폭 "px.\n"; 메시지 = "패딩이 포함된 콘텐츠의 높이: 컨테이너.스크롤 높이 "px.\n"; 경고(메시지); }

function GetContainerSize() {
  var container = document.getElementById("tempDiv");
  var message =
    "The width of the contents with padding: "  
    container.scrollWidth  
    "px.\n";
  message  =
    "The height of the contents with padding: "  
    container.scrollHeight  
    "px.\n";

  alert(message);
}

이 주제에 대한 자세한 내용은 다음 스크립트를 참조하세요.

[오버플로 문서](http://help. dottoro.com/ljbixkkn.php)