overflow : hidden이 <td>에서 작동하지 않는 이유는 무엇입니까?

146

나는 항상 특정 너비가되고 싶은 표 셀을 가지고 있습니다. 그러나 큰 간격의 텍스트가없는 텍스트에서는 작동하지 않습니다. 테스트 사례는 다음과 같습니다.

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}
<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>
스 니펫 확장

상자를 확장하지 않고 상자 가장자리에서 텍스트를 잘라내려면 어떻게해야합니까?

html  css 
— 마이크
소스

답변:

205

여기 같은 문제가 있습니다.

당신은 설정해야 table-layout:fixed 하고 뿐만 아니라 테이블 요소에 적절한 폭 overflow:hidden과 white-space: nowrap테이블 셀에.

예

고정 너비 열

테이블의 너비는 고정 너비 셀과 동일하거나 작아야합니다.

하나의 고정 너비 열로 :

코드 스 니펫 표시

고정 너비 열이 여러 개인 경우 :

코드 스 니펫 표시

고정 및 유동 폭 열

테이블의 너비를 설정해야 하지만 유체 셀이 추가 너비를 가져옵니다.

여러 열로 고정 너비 및 유체 너비 :

코드 스 니펫 표시

— misterManSam
소스
21

그것이 바로 TD의 방식입니다. TD 요소의 '디스플레이'속성이 본질적으로 '블록'이 아닌 '테이블 셀'로 설정되어 있기 때문일 수 있습니다.

귀하의 경우 대안은 TD의 내용을 DIV에 포장하고 너비와 오버플로를 DIV에 적용하는 것입니다.

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

처리해야 할 패딩 또는 셀 패딩 문제가있을 수 있으며 인라인 스타일을 제거하고 대신 외부 CSS를 사용하는 것이 좋습니다.하지만 시작해야합니다.

— 앤디 포드
소스
이것은 작동하지만 vertical-align:middleDIV에 추가하고 추가해도 문제가 해결되지 않습니다.
— Michael
10

CSS table-layout:fixed;(때로는 width:<any px or %>)를 TABLE에 적용하고 white-space: nowrap; overflow: hidden;TD의 스타일을 적용하십시오 . 그런 다음 올바른 셀 또는 열 요소 에 CSS 너비를 설정 하십시오 .

유의하게, 고정 레이아웃 테이블 열 너비는 테이블의 첫 번째 행에있는 셀 너비에 의해 결정됩니다. 첫 번째 행에 TH 요소가 있고 너비가 TD에 적용되고 (TH가 아닌) 너비는 TD의 내용에만 적용됩니다 (공백 및 오버플로는 무시 될 수 있음). 테이블 열은 설정된 TD 너비에 관계없이 (첫 번째 행의 TH에서 너비가 지정되지 않았기 때문에) 균일하게 분배되며 열은 [계산 된] 동일한 너비를 갖습니다. 테이블은 후속 행의 TD 너비를 기준으로 열 너비를 다시 계산하지 않습니다. 테이블에서 처음 접할 셀 요소의 너비를 설정하십시오.

또한, 및 세트 열 너비에 가장 안전한 방법은 사용하는 것입니다 <COLGROUP>및 <COL>각 고정 폭 COL에 세트 폭 CSS와 테이블에 태그입니다. 테이블이 열 너비를 미리 알고 있으면 셀 너비 관련 CSS가 더 잘 재생됩니다.

— 쇼즈
소스
7

특정 문제에 익숙하지 않지만 td 안에 div 등을 붙일 수 있고 오버플로를 설정할 수 있습니다.

— 올리
소스
5

여기에 당신을위한 해결책이 있지만 그것이 왜 작동하는지 이해하지 못합니다.

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

즉, 셀 내용을 div에 래핑합니다.

— 클레 투스
소스
로이 더욱 개선 될 수있다 여기에 표시 - 특히, overflow:hidden제거 할 수 있습니다 td, 그리고 폭이 div100 % 그래서 어떤으로 작동하는지 설정할 수 있습니다 td(! 자동 크기의 것들을 포함) 폭
— 로마 Starkov을
4

가장 좋은 해결책은 너비가 0 인 테이블 셀에 div를 넣는 것입니다. Tbody 테이블 셀은 thead에 정의 된 너비에서 너비를 상속합니다. 위치 : 상대 및 음의 마진이 트릭을 수행해야합니다!

다음은 스크린 샷입니다. https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>
— 굴라 수르 만
소스
물론 span에 선언 된 span에 대한 적절한 블록 설정을 지정하여 span과 div를 모두 사용해야합니다. 내가 아는 것처럼 td에는 div도 포함해야합니다.
— Gyula Surmann
3

: 당신은 테이블의 스타일 속성을 설정해야 width하고 table-layout: fixed;송출하는 '오버 플로우 : 숨겨진를;' 속성이 제대로 작동합니다.

Imo width스타일 속성 이있는 div를 사용하는 것보다 낫습니다 . 특히 동적 크기 조정 계산에 사용할 때 테이블에는 더 간단한 DOM이있어 패딩 및 여백에 대한 수정이 필요하지 않기 때문에 조작이 더 쉽습니다.

또한 모든 셀의 너비를 설정할 필요는 없지만 첫 번째 행의 셀에만 너비를 설정할 필요는 없습니다.

이처럼 :

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>
— 윌코 게 싱크
소스
2

방금 비슷한 문제가 있었고 처음 에는 <div>내부 를 사용해야했습니다 <td>(John MacIntyre의 솔루션은 여러 가지 이유로 작동하지 않았습니다).

참고 즉 비록 <td><div>...</div></td>그래서 대신 내가 사용하고 사업부 유효 배치하지 않습니다 <span>와 display:block;세트. 그것은 지금 잘 확인하고 작동합니다.

— 단순한 개발
소스
1

가장 쉽고 간단한 솔루션 : 

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}
— 아르 민
소스
0

더 간단하게하기 위해 텍스트 영역을 td wich 안에 넣을 것을 제안합니다. 오버플로가 자동으로 관리됩니다.

<td><textarea autofocus>$post_title</textarea></td>

개선 할 필요가있다

— 질 블랑 카드
소스
0 
<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

디스플레이 123456

— 프란체스코 루포 드 본 네발
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.