CSS : 테이블 셀을 자르지 만 가능한 한 적합

프레드를 만나십시오. 그는 테이블입니다.

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

프레드의 아파트는 크기가 변하는 기괴한 습관을 가지고 있기 때문에 다른 모든 유닛을 밀지 않고 휘 포드 부인의 거실을 망각으로 밀어 넣지 않도록 일부 내용을 숨기는 법을 배웠습니다.

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

이것은 작동하지만 Fred는 오른쪽 셀 (셀 디토라는 별명)이 약간의 공간을 포기하면 왼쪽 셀이 많은 시간 동안 잘리지 않을 것이라는 잔소리를합니다. 그의 정신력을 구할 수 있습니까?

요약 : 표의 셀이 어떻게 고르게 오버플로 될 수 있으며 모든 공백을 모두 포기했을 때만 가능합니까?

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

JavaScript가 아닌 솔루션이 있다고 생각합니다! 결코 늦지 않는 것보다 낫지? 결국 이것은 훌륭한 질문이며 Google은 끝났습니다. 페이지가로드 할 수없는 후에 움직일 때 약간의 지터가 허용되지 않기 때문에 자바 스크립트 수정을 해결하고 싶지 않았습니다.

특징 :

• 자바 스크립트 없음
• 고정 레이아웃 없음
• 가중치 또는 백분율 폭 트릭 없음
• 여러 열과 함께 작동
• 간단한 서버 측 생성 및 클라이언트 측 업데이트 (계산 필요 없음)
• 크로스 브라우저 호환

작동 방식 : 테이블 셀 안에는 두 개의 다른 요소에 내용의 두 복사본을 상대적으로 배치 된 컨테이너 요소 내에 배치합니다. 스페이서 요소는 정적으로 배치되므로 테이블 셀의 너비에 영향을줍니다. 스페이서 셀의 내용물을 감싸도록함으로써 찾고있는 테이블 셀의 "최적의"너비를 얻을 수 있습니다. 이를 통해 절대적으로 배치 된 요소를 사용하여 보이는 컨텐츠의 너비를 상대적으로 배치 된 부모의 너비로 제한 할 수 있습니다.

IE8, IE9, IE10, Chrome, Firefox, Safari, Opera에서 테스트 및 작업

결과 이미지 :

JSFiddle : http://jsfiddle.net/zAeA2/

샘플 HTML / CSS :

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

나는 며칠 전에 같은 도전에 직면했습니다. 루시퍼 샘 이 최고의 해결책을 찾은 것 같습니다 .

그러나 spacer 요소에서 내용을 복제해야한다는 것을 알았습니다. 그렇게 나쁘지는 않다고 생각했지만 title잘린 텍스트에 팝업 을 적용하고 싶습니다 . 그리고 그것은 긴 텍스트가 내 코드에서 세 번째로 나타날 것임을 의미합니다.

여기서는 의사 요소의 title속성 에 액세스 :after하여 스페이서를 생성하고 HTML을 깨끗하게 유지하도록 제안합니다 .

IE8 +, FF, Chrome, Safari, Opera에서 작동

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

Javascript가 수용 가능한 경우, 시작점으로 사용할 수있는 빠른 루틴을 작성했습니다. 창 크기 조정 이벤트에 반응하여 범위의 내부 너비를 사용하여 셀 너비를 동적으로 조정하려고 시도합니다.

현재 각 셀은 일반적으로 행 너비의 50 %를 차지한다고 가정하고 오른쪽 셀을 축소하여 왼쪽 셀을 최대 너비로 유지하여 오버플로를 방지합니다. 사용 사례에 따라 훨씬 더 복잡한 폭 밸런싱 로직을 구현할 수 있습니다. 도움이 되었기를 바랍니다:

테스트에 사용한 행의 마크 업 :

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

크기 조정 이벤트를 연결하는 JQuery :

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

훨씬 더 쉽고 우아한 솔루션이 있습니다.

잘림을 적용하려는 테이블 셀 내에 css table-layout : fixed로 컨테이너 div를 포함하십시오. 이 컨테이너는 부모 테이블 셀의 전체 너비를 사용하므로 반응 형입니다.

표의 요소에 잘림을 적용하십시오.

IE8 +에서 작동

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

그리고 CSS :

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

여기 작동하는 바이올린이 있습니다 https://jsfiddle.net/d0xhz8tb/

문제는 균등 한 간격의 고정 너비 열을 생성하는 'table-layout : fixed'입니다. 그러나이 CSS 속성을 비활성화하면 테이블이 최대한 커지고 오버플로가 발생하지 않기 때문에 텍스트 오버플로가 중단됩니다.

죄송하지만이 경우 Fred는 케이크를 가지고 그것을 먹을 수 없습니다. 집주인이 Celldito에게 처음으로 작업 할 공간이 줄어들지 않으면 Fred는 그의 케이크를 사용할 수 없습니다.

다음과 같이 특정 열에 "가중"을 시도 할 수 있습니다.

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

너비가 0 % 인 열을 사용하고 white-spaceCSS 속성을 조합하여 사용하는 등 좀 더 재미있는 조정을 시도 할 수도 있습니다.

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

당신은 아이디어를 얻습니다.

그래도 thirtydot에 있다고 말하면 js 메소드를 사용하지 않으면 할 수있는 방법이 없습니다. 정의해야 할 복잡한 렌더링 조건에 대해 이야기하고 있습니다. 예를 들어 두 셀이 아파트에 비해 너무 커지면 어떻게 될지 우선 순위를 가진 사람을 결정하거나 단순히 면적의 백분율을 제공해야합니다. CSS로 할 수있는 방법이없는 다른 셀에서 다리를 뻗습니다. 사람들이 내가 생각하지 않은 CSS 로하는 꽤 펑키 한 일이 있지만. 그래도 당신이 이것을 할 수 있는지 의심합니다.

samplebias 답변과 마찬가지로 Javascript가 허용되는 답변 인 경우 https://github.com/marcogrcr/jquery-tableoverflow를 위해 특별히 jQuery 플러그인을 만들었습니다.

플러그인을 사용하려면 다음을 입력하십시오.

$('selector').tableoverflow();

전체 예 : http://jsfiddle.net/Cw7TD/3/embedded/result/

편집 :

• IE 호환성을 위해 jsfiddle에서 수정되었습니다.
• 더 나은 브라우저 호환성 (Chrome, Firefox, IE8 +)을 위해 jsfiddle에서 수정되었습니다.

CSS 해킹을 사용 display: table-column;하면 구출 할 수있는 것처럼 보입니다 .

<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}

JSFiddle : http://jsfiddle.net/blai/7u59asyp/

다음 규칙을 간단하게 추가하십시오 td.

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

예:

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

<table border="1">
  <tr>
    <td>content</td>
    <td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
    <td>other content</td>
  </tr>
</table>

추신 : 다른 너비로 사용자 정의 너비를 설정 td하려면 min-width.

이 질문은 Google에서 상단에 표시되므로 제 경우에는 https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ 의 CSS 스 니펫을 사용 했지만 td에 적용하지 않았습니다. 원하는 결과.

나는 td의 텍스트 주위에 div 태그를 추가해야했고 줄임표가 마침내 작동했습니다.

약식 HTML 코드;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

약식 CSS;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

"nowrap"이 문제를 어느 정도 해결했는지 확인하십시오. 참고 : nowrap은 HTML5에서 지원되지 않습니다

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content  </td>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td>
</tr>

오른쪽 셀의 너비를 필요한 최소 너비로 설정 한 다음 왼쪽 셀 내부에 overflow-hidden + text-overflow를 적용 할 수 있지만 Firefox는 버그가 있습니다.

flexbox가 도움이 될 수 있지만

나는 최근에 노력하고 있습니다. 이 jsFiddle test 를 확인하고 기본 테이블의 너비를 변경하여 동작을 확인하십시오.)

해결책은 테이블을 다른 테이블에 포함시키는 것입니다.

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

Fred는 이제 Celldito의 확장에 만족합니까?

이것이 누구에게 도움이되는지 모르겠지만 각 열에 특정 너비 크기를 백분율로 지정하여 비슷한 문제를 해결했습니다. 분명히 이것은 각 열에 너비가 너무 넓지 않은 내용이있는 경우 가장 잘 작동합니다.

나는 같은 문제가 있었지만 여러 줄을 표시해야했습니다 ( text-overflow: ellipsis;실패한 곳 ). textarea내부 a를 사용하여 해결 TD한 다음 테이블 셀처럼 작동하도록 스타일을 지정합니다.

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

'table-layout : fixed'가 필수 레이아웃 요구 사항이라는 점을 감안할 때 균등하게 간격을 조정할 수없는 열을 만들지 만 너비가 다른 셀을 만들어야한다면 셀의 'colspan'을 배수로 설정해야합니까?

예를 들어, 백분율 계산을 쉽게하기 위해 총 너비 100을 사용하고 하나의 셀이 80 %이고 다른 하나는 20 %가 필요하다고 가정하면 다음을 고려하십시오.

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

물론 80 % 및 20 %의 열의 경우 100 % 너비 셀 colspan을 5로, 80 %를 4로, 20 %를 1로 설정할 수 있습니다.