집 >웹 프론트엔드 >CSS 튜토리얼 >테이블에 타원 기능을 추가하는 방법

테이블에 타원 기능을 추가하는 방법

php中世界最好的语言원래의: 2018-03-09 14:00:053437검색

이번에는 표에 줄임표 기능을 추가하는 방법을 보여드리겠습니다. 표에 줄임표 기능을 추가할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

1. 원인

표에 단어가 너무 많으면 줄임표를 사용하라는 요청을 받았습니다. text-overflow:ellipsis (참고:overflow:hidden; text-overflow:ellipsis; 공백: nowrap을 함께 사용해야 함), 테이블에서는 작동하지 않습니다. Baidu는 즉시 작동하려면 테이블 레이아웃: 고정을 테이블 요소에 설정해야 한다고 말했고 작동했습니다.

2. 텍스트 오버플로의 전제 조건: 줄임표가 작동하려면

컨테이너의 너비를 정의해야 합니다(핵심)

overflow:hidden;이 없으면 텍스트가 가로로 바깥쪽으로 늘어납니다. 공백이 없습니다: nowrap; 높이를 정의하더라도 텍스트가 컨테이너 높이를 아래로 밀어냅니다. 줄임표가 표시되지 않고 초과 텍스트가 잘립니다.

text-overflow:ellipsis; , 초과된 텍스트는 잘립니다. text-overflow:clip을 이렇게 정의하는 것과 같습니다.

3. 위 핵심 사항의 전제

는 컨테이너의 너비를 정의해야 하며, 이것이 table-layout:fixed가 작동하는 이유입니다. 및 table-layout: auto(테이블 요소 기본값은 auto )가 작동하지 않습니다. 다음 단락은 css2.1 중국어 버전 사양에서 나온 것입니다:

'table-layout'

Value: autofixed

Initial: auto
적용 대상: 'table' 및 'inline-table' 요소
상속: no
Percentages: N/A
미디어: Visual
계산 값: 지정된 값과 동일

'table-layout' 속성은 테이블에 사용되는 알고리즘을 제어합니다. 셀, 행 및 열 레이아웃. 값의 의미는 다음과 같습니다.

fixed: 고정 테이블 레이아웃 알고리즘 사용

auto: 자동 테이블 레이아웃 알고리즘 사용

(fixed와 auto의 차이점은 하나는 고정이고 다른 하나는 자동이라는 것입니다.)

다음은

고정 테이블 레이아웃 알고리즘(고정)에서 각 열의 너비는 다음 규칙에 따라 결정됩니다.

너비 속성 값이 'auto'가 아닌 열 요소의 열 너비가 설정됩니다. 해당 너비 값으로

그렇지 않으면 첫 번째 행의 너비에 따라 결정됩니다. 너비 속성 값이 'auto'가 아닌 셀은 열의 너비를 결정합니다. 셀이 여러 열에 걸쳐 있으면 너비가 열로 나뉩니다.

나머지 모든 열은 나머지 가로 테이블 공간으로 균등하게 나뉩니다(테두리 또는 셀 간격 제외)

3 말하자면, 나머지 모든 열은 나머지 가로 테이블을 균등하게 나눕니다. 실제 상황은 테이블이 나머지 열의 너비를 동일하게 나눈다는 것입니다. 각 열의 고정 너비는 남은 너비/남은 열의 수입니다. text-overflow:ellipsis가 작동하려면 이것이 확실해야 합니다. . 컨테이너의 너비를 정의하려면 고정 작업을 수행합니다.

자동 테이블 레이아웃 알고리즘(고정)에서 열 너비는 다음 단계에 따라 결정됩니다.

각 셀의 최소 콘텐츠 너비(MCW)를 계산합니다. 원하는 만큼 행을 확장할 수 있지만 셀에서 넘치지는 않습니다. 셀에 지정된 '너비'(W)가 MCW보다 큰 경우 W는 최소 셀 너비입니다. 'auto' 값은 MCW가 최소 셀 너비임을 의미하며, 그런 다음 각 셀의 "최대" 너비를 계산합니다. 명시적인 줄 바꿈 이외의 줄 바꿈을 고려하지 않고 내용의 형식을 지정합니다.

각 열에 대해 해당 범위에서만 시작합니다. 열 셀의 최대 및 최소 열 너비를 결정합니다. 최소 열 너비는 최소 셀 너비 중 가장 큰 것(또는 열 '너비' 중 더 큰 것)이 필요한 최소 열 너비입니다. 최대 열 너비는 최대 셀 너비 중 가장 큰 것(또는 열 '너비' 중 더 큰 것)에 필요한 최대 열 너비입니다.

여러 열에 걸쳐 있는 각 셀의 경우, 해당 열의 최소 너비를 늘려서 적어도 셀만큼 넓습니다. 최대 너비도 마찬가지입니다. 가능하다면 모든 스패닝 열을 거의 동일한 너비로 더 넓게 만드세요

'너비'가 '자동'이 아닌 각 열 그룹 요소에 대해 스팬되는 열의 최소 너비를 늘려 적어도 열 너비만큼 넓어지도록 하세요. 그룹의 너비'는 너비와 같습니다

사실 어떤 것들은 매우 간단하지만, 그것에 대해 이야기하면 혼란스럽습니다. . .

1에서 언급한 것처럼 셀에서 지정한 '너비'(W)가 MCW보다 큰 경우 W는 최소 셀 너비입니다. 'auto' 값은 MCW가 최소 셀 너비임을 나타냅니다.

**사례 1: W > MCW인 경우 W는 최소 셀 너비입니다. 즉, 열 너비는 W이고 열 너비는 텍스트에 맞을 수 있으며 줄임표는 필요하지 않습니다.

케이스 2: W **
table-layout:fixed를 사용하지 않고 즉, table-layout:auto를 전제로 줄임표를 사용하려면 다음과 같이 하면 됩니다(td에 다른 요소를 설정하고 이 요소에 줄임표를 설정)

<style>div {  width: 100px;
}.ellipsis {  text-overflow:ellipsis;  overflow: hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}</style>...<td>
  <div class="ellipsis">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  </div></td>...

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!