표 셀의 CSS 텍스트 오버플로?

text-overflow텍스트가 너무 길어서 한 줄에 맞지 않을 경우 여러 줄로 줄 바꿈하지 않고 줄임표로 자르도록 CSS 를 표 셀 에 사용하고 싶습니다 . 이것이 가능한가?

나는 이것을 시도했다 :

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

그러나 white-space: nowrap텍스트 (및 셀)가 계속 오른쪽으로 확장되어 테이블의 전체 너비가 컨테이너 너비를 넘어서도록 하는 것처럼 보입니다. 그러나 텍스트가 없으면 셀 가장자리에 닿을 때 텍스트가 여러 줄로 줄 바꿈됩니다.

표 셀이 오버플로 될 때 줄임표가있는 텍스트를 자르 려면 오버플로가 작동하도록 max-width각 td클래스에 CSS 속성 을 설정해야합니다 . 추가 레이아웃 div가 필요하지 않습니다

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

반응 형 레이아웃; 사용 max-width열의 유효 최소 폭을 지정하거나 사용하는 CSS 속성을 max-width: 0;무제한 유연성. 또한 포함하는 테이블에는 일반적으로 특정 너비가 필요하며 width: 100%;열의 너비는 일반적으로 총 너비의 백분율로 설정됩니다.

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

역사적 : IE 9 이하의 경우 IE 고유의 렌더링 문제를 해결하려면 HTML에 이것을 포함해야합니다.

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

지정 max-width너비를 고정하거나 것이 모든 상황에서 작동하는 것은 아니며 테이블은 유동적이고 자동으로 셀 간격을 유지해야합니다. 이것이 바로 테이블입니다.

이것을 사용하십시오 : http://jsfiddle.net/maruxa1j/

HTML :

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS :

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

IE9 및 기타 브라우저에서 작동합니다.

왜 이런 일이 발생합니까?

w3.org 의이 섹션 은 텍스트 오버플로가 블록 요소에만 적용되는 것으로 보입니다 .

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

MDN은 동일을 말한다 .

이 jsfiddle 에는 코드 (몇 가지 디버그 수정 사항이 있음) div가 td있습니다. 또한 내용을 td포함하는 div블록 에 래핑하여 빠르게 생각할 수있는 유일한 해결 방법이 있습니다 . 그러나 그것은 나에게 "못생긴"마크 업처럼 보이기 때문에 다른 사람이 더 나은 해결책을 원합니다. 이것을 테스트하는 코드는 다음과 같습니다.

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

고정 너비를 다른 것으로 설정하지 않으려는 경우

아래 솔루션을 사용하면 테이블 셀 내용이 길지만 부모 테이블의 너비 나 부모 행의 높이에 영향을 미치지 않아야합니다. 예를 들어 width:100%자동 크기 기능을 다른 모든 셀에 적용 하는 테이블이있는 경우 . "메모"또는 "설명"열 또는 무언가가있는 데이터 그리드에 유용합니다.

CSS에 다음 3 가지 규칙을 추가하십시오.

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

동적 텍스트 오버플로를 원하는 표 셀에서 다음과 같이 HTML 형식을 지정하십시오.

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

또한 원하는 적용 min-width 테이블 셀에 (또는 전혀 없음)을 적용하십시오.

물론 바이올린 : https://jsfiddle.net/9wycg99v/23/

당신이 지정하는 경우 것 같습니다 table-layout: fixed;온 table을 위해 다음 요소 당신의 스타일을 td적용한다. 그러나 이것은 셀 크기에 영향을 미칩니다.

Sitepoint는 테이블 레이아웃 방법에 대해 약간 설명합니다. http://reference.sitepoint.com/css/tableformatting

테이블을 자동 레이아웃하려는 경우

없이 사용 max-width또는 백분율 칼럼 폭, 또는 table-layout: fixed등등

https://jsfiddle.net/tturadqq/

작동 방식 :

1 단계 : 테이블 자동 레이아웃이 그 일을하도록하십시오.

텍스트가 많은 하나 이상의 열이 있으면 가능한 한 다른 열을 축소 한 다음 긴 열의 텍스트를 줄 바꿈합니다.

2 단계 : div에서 셀 내용을 래핑 한 다음 해당 div를 max-height: 1.1em

(추가 0.1em은 'g'와 'y'의 꼬리와 같이 텍스트 밑으로 약간 아래로 렌더링하는 문자 용입니다)

3 단계 : titlediv 설정

이것은 접근성에 좋으며 잠시 사용할 작은 트릭에 필요합니다.

4 단계 : ::afterdiv에 CSS 추가

이것은 까다로운 비트입니다. 우리는 CSS를 설정 ::after하여, content: attr(title)다음, 위치를 그 사업부와 세트의 상단에 text-overflow: ellipsis. 명확하게하기 위해 여기에 빨간색으로 표시했습니다.

(긴 기둥에 꼬리 줄임표가 어떻게 나타나는지 확인하십시오)

5 단계 : div 텍스트의 색상을 transparent

그리고 우리는 끝났습니다!

표 너비가 백분율이거나 표 셀에 고정 너비를 설정할 수없는 경우 당신은 table-layout: fixed;그것을 작동하도록 신청할 수 있습니다 .

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

셀 내용을 플렉스 블록으로 감 쌉니다. 보너스로, 셀 자동은 보이는 너비에 맞습니다.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

셀 내부에 절대적으로 위치한 div를 사용 하여이 문제를 해결했습니다 (상대).

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

그게 다야. 그런 다음 div에 top : 값을 추가하거나 수직으로 가운데에 배치 할 수 있습니다.

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

오른쪽에 약간의 공간을 확보하기 위해 최대 너비를 약간 줄일 수 있습니다.

이것은 필자의 경우 Firefox와 Chrome 모두에서 작동했습니다.

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

이것은 IE 9에서 작동하는 버전입니다.

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>