긴 텍스트가 포함 된 표의 세로 스크롤을 방지하려면 어떻게합니까?

빌드 소프트웨어에는 테이블을 사용하여 빌드 상태를보고하는 웹 인터페이스가 있습니다. 빌드가 보류 중일 때 내부 테이블에 마지막 로그 메시지를 출력합니다. 이러한 로그 메시지는 매우 길 수 있습니다. 긴 텍스트가 포함 된 표의 세로 스크롤을 방지하려면 어떻게합니까?

이

은 HTML의 증류수 버전 방출 :

<html> 
<head> 
</head> 
<body> 
    <table id="StatusGrid" class="SortableGrid"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
     <td>10</td> 
     <td>11</td> 
    </tr> 
    <tr class="buildstatus"> 
     <td colspan="11"> 
      <table> 
      <tr> 
       <td>hello</td> 
       <td>...........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</td> 
      </tr> 
      </table> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

브라우저에서이 HTML을 표시 할 경우 수직 테이블의 전체 내용을보기 위해 스크롤해야합니다. 나는 이것을 원하지 않는다. I 절대 브라우저 창의 세로 너비를 벗어나 테이블을 확장하려고합니다. 나는 안쪽 테이블의 여분의 긴 텍스트를 잘라내거나 자르는 것에 신경 쓰지 않는다.

나는 word-break: break-all을 시도했지만 Chrome에서만 작동합니다. IE 9와 최신 버전의 Chrome 및 Firefox를 지원해야합니다.

마지막 주름 : 수정하려면 CSS를 사용해야합니다.. HTML이 아닌 응용 프로그램의 스타일 시트에만 액세스 할 수 있습니다.

당신은 어떻게 생각하십니까? 가능한?

출처

2012-02-09 Aaron Jensen

td에 고정 된 높이를두고 오버 플로우 또는 오버플로 -y를 숨김으로 설정하십시오.

tr.buildstatus td{ 
    height: 500px; 
    width: 600px; 
    overflow:hidden; /* or overflow-y:hidden; */ 
}

출처

2012-02-09 02:06:50 jerjer

FYI이 행의 모든 TD에 영향을 미칩니다. –

이 방법이 유용 할 것입니다. 너는 취향에 맞게 높이/너비를 조정해야 할 수도 있습니다.

tr.buildstatus tr td + td { 
    height:100px; 
    width:200px; 
    overflow:hidden; 
} 
table { 
    table-layout:fixed; 
    width:600px; 
    height:200px; 
}

라이브 예 : http://jsfiddle.net/R8nmk/

출처

2012-02-09 02:08:53

overflow: hidden을보십시오.
오버플로가 잘리고 내용의 나머지 부분이 보이지 않습니다.
오버플로에 대한 추가 정보 here.

출처

2012-02-19 01:40:36

긴 텍스트가 포함 된 표의 세로 스크롤을 방지하려면 어떻게합니까?

답변

관련 문제