programing

테이블 셀에서 CSS 텍스트 오버플로?

bestprogram 2023. 6. 1. 23:03

테이블 셀에서 CSS 텍스트 오버플로?

저는 CSS CSS를 .text-overflow텍스트가 한 줄에 맞지 않을 정도로 길면 여러 줄로 묶는 대신 줄임표로 클리핑합니다.이것이 가능합니까?

시도해 봤습니다.

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

그데그런.white-space: nowrap텍스트(및 해당 셀)가 계속 오른쪽으로 확장되어 테이블의 전체 너비를 컨테이너 너비 밖으로 밀어내는 것처럼 보입니다.그러나 텍스트가 없으면 텍스트가 셀 가장자리에 닿으면 여러 줄로 계속 감깁니다.

표 셀을 초과할 때 생략 부호가 있는 텍스트를 클리핑하려면 다음을 설정해야 합니다.max-width "" "" CSS ""의 td오버플로 작업 클래스입니다. 레이아웃 가추레웃없음아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.column_a {width: 30%;}
td.column_b {width: 70%;}

기록:IE 9(또는 그 이하)의 경우 HTML에 IE별 렌더링 문제를 수정해야 합니다.

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

max-width또는 고정 너비가 모든 상황에서 작동하는 것은 아니며 테이블은 유동적이어야 하며 셀을 자동으로 띄워야 합니다.그래서 테이블이 필요합니다.IE9 및 기타 브라우저에서 작동합니다.

사용 방법: http://jsfiddle.net/maruxa1j/

table {
    width: 100%;
}
.first {
    width: 50%;
}
.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: '&nbsp;';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ellipsis first"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
        </tr>
    </tbody>
</table>

왜 이런 일이 일어날까요?

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%자동 크기 기능을 다른 모든 셀에 적용합니다."있는 합니다."Notes" 또는 "Comment" 열이 있는 데이터 그리드에서 유용합니다.

여기에 이미지 설명 입력

다음 세 가지 규칙을 CSS에 추가합니다.

.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/

테이블이 자동 레이아웃되도록 하려면

사용하지 않음max-width 열 또열너 백율또분는의비는▁ortable-layout: fixed

https://jsfiddle.net/tturadqq/

작동 방식:

1단계: 테이블 자동 레이아웃이 작동하도록 합니다.

텍스트가 많은 열이 하나 이상 있는 경우 다른 열을 최대한 축소한 다음 긴 열의 텍스트를 래핑합니다.

여기에 이미지 설명 입력

를 2계단으로 합니다.max-height: 1.1em

(추가 0.1em은 'g'와 'y'의 꼬리처럼 텍스트 베이스보다 약간 아래로 렌더링되는 문자를 위한 것입니다.)

여기에 이미지 설명 입력

3단계: 설정title

이것은 접근성에 좋고 잠시 후에 사용할 작은 속임수에 필요합니다.

여기에 이미지 설명 입력

CSS 추가 : CSS 추가::after

이것이 까다로운 부분입니다.우리는 CSS를 설정했습니다.::after,와 함께content: attr(title)그런 다음 그것을 디브와 세트 위에 배치합니다.text-overflow: ellipsis분명히 하기 위해 여기에 빨간색으로 칠했습니다.

(긴 열에 이제 꼬리 타원이 있는 방식에 주목하십시오.)

여기에 이미지 설명 입력

을 5계단으로 합니다: div 스트의색다음상설정로합니다으을텍▁step▁div다.transparent

그리고 우리는 끝!

여기에 이미지 설명 입력

를 하면 '으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으table-layout: fixed;에서.table그은 소에, 음대한스입니다.td효력이 발생해야 합니다.이것은 또한 세포의 크기에 영향을 미칠 것입니다.

Sitepoint는 여기서 테이블 검색 방법에 대해 조금 설명합니다. http://reference.sitepoint.com/css/tableformatting

표 너비가 백분율로 표시되거나 표 셀에 고정 너비를 설정할 수 없는 경우.당신은 그것을 작동시키기 위해 신청할 수 있습니다.

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%;
}

그것은 나에게 효과가 있습니다.

table {
    width: 100%;
    table-layout: fixed;
}

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

타원형을 사용하여 자동 크기 테이블 정리

당신이 태그를 수 , 더 (할 수 : 만약당는신테버태수릴있, 면다의 CSS깨한끗 (IMO) 솔루다수:grid배치도

하나만 .div또는 내부에 셀이 있는 테이블을 나타내는 것과 유사합니다. 예:

<div class="table">
  <div class="cell">text</div>
  <div class="cell">text</div>
  <div class="cell">text</div>
  <div class="cell">text</div>
</div>

이것을 2x2 테이블로 만들려면 그리드에 대해 두 개의 자동 크기 열을 정의하는 것이 좋습니다.

.table {
  display: grid;
  grid-template-columns: auto auto;
}

셀의 경우 CSS 몇 줄이 더 필요합니다.

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

잘했어요!일부 열이 다른 열보다 넓다는 것을 확인해야 하는 경우에는fr단위 또는 열 템플릿에 사용할 수 있는 기타 옵션이 잘 작동합니다.

.table {
  display: grid;
  grid-template-columns: auto auto;
}
.cell {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid black;
}
<div class="table">
  <div class="cell">long long long long long long long long long long long long long long long long long long long long long long long long</div>
  <div class="cell">text</div>
  <div class="cell">text</div>
  <div class="cell">text</div>
</div>

XML

<td><div>Your overflowing content here.</div></td>

CSS

td div
{
 max-height: 30vh;
 overflow: auto;
}

입니다.table이 매우 구체적인 목적을 위해서는 말이 안 됩니다.예, 다른 600divs 네스트 트위터/Facebook "개발자"가 되지 않도록 명시적으로 작업하는 경우 추가 요소를 추가해도 괜찮은 경우가 있습니다.

이 버전은 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>

언급URL : https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell

'programing' 카테고리의 다른 글

인스턴스 메서드를 원숭이 패치할 때 새 구현에서 재정의된 메서드를 호출할 수 있습니까?  (0) 2023.06.01
jQuery 연기 및 약속 - .then() vs.done()  (0) 2023.06.01
Windows 배치 파일에서 시스템 환경 변수를 설정하시겠습니까?  (0) 2023.06.01
예외를 발생시키지 않고 Ruby에서 현재 스택 추적 가져오기  (0) 2023.06.01
Git, 오리진/마스터를 커밋으로 재설정하는 방법은 무엇입니까?  (0) 2023.06.01

'programing'의 다른글

  • 현재글테이블 셀에서 CSS 텍스트 오버플로?

관련글

댓글

티스토리툴바