테이블 셀을 잘라내되 내용을 최대한 맞추려면 어떻게 해야 합니까?
프레드를 만나보세요.그는 테이블입니다.
<table border="1" style="width: 100%;">
<tr>
<td>This cells has more content</td>
<td>Less content here</td>
</tr>
</table>
프레드의 아파트는 크기를 바꾸는 특이한 습관이 있어서, 다른 유닛들을 모두 밀치고 부인을 밀치지 않기 위해 자신의 내용물을 숨기는 법을 배웠습니다.Whitford의 거실은 잊혀졌습니다.
<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>
이것은 효과가 있지만 프레드는 (셀디토라는 별명으로 불리는) 자신의 오른쪽 세포가 조금만 공간을 내준다면 왼쪽 세포가 잘리지 않을 거라는 계속되는 느낌을 가지고 있습니다.그의 제정신을 살릴 수 있습니까?
요약하면:어떻게 하면 테이블의 세포들이 고르게 흘러넘칠 수 있을까요, 그리고 그들 모두가 그들의 모든 빈 공간을 포기해야만 말이죠?
<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>
자바스크립트가 아닌 솔루션이 있다고 생각합니다!페이지가 로드된 후에 움직이는 것들의 약간의 지터가 허용할 수 없는 것을 발견했기 때문에 자바스크립트 수정에 만족하고 싶지 않았습니다.
특징:
- 자바스크립트 없음
- 고정 배치 없음
- 가중치 또는 백분율 폭 트릭 없음
- 열 개수에 상관없이 작업
- 간단한 서버측 생성 및 클라이언트측 업데이트(계산 필요 없음)
- 크로스 브라우저 호환
작동 방식:테이블 셀 내부에는 내용의 복사본 두 개를 비교적 위치에 있는 컨테이너 요소 내의 두 개의 다른 요소에 배치합니다.스페이서 요소는 정적으로 배치되므로 테이블 셀의 너비에 영향을 미칩니다.스페이서 셀의 내용물을 랩핑할 수 있게 함으로써 우리가 찾고 있는 테이블 셀의 "최적의" 폭을 얻을 수 있습니다.이를 통해 절대 위치 요소를 사용하여 가시적인 내용의 폭을 상대적으로 위치한 부모의 것으로 제한할 수 있습니다.
테스트 및 작동 중: 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> </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;
}
하면 에 을 추가하기만 됩니다.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>PS: 사용자 지정 너비를 다른 너비로 설정하려면td재산을 하다, 재산을 하다, 사용하다함함min-width.
저는 며칠 전에도 똑같은 도전에 직면했습니다.루시퍼 샘이 최선의 해결책을 찾은 것 같군요
하지만 스페이서 요소에서 내용을 복제해야 한다는 것을 알게 되었습니다.했는데,했는데,title잘라낸 텍스트에 대한 팝업입니다.그리고 제 코드에 세 번째로 긴 텍스트가 나타난다는 뜻입니다.
여기에 액세스할 것을 제안합니다.title에서 속성을 합니다.:after를 생성하고 을 깨끗하게 pseudo-element.pseudo-element :를 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/
훨씬 쉽고 우아한 솔루션이 있습니다.
잘라내기를 적용할 테이블 셀 내에 css 테이블 레이아웃이 있는 컨테이너 div를 포함하기만 하면 됩니다: fixed.이 컨테이너는 상위 테이블 셀의 전체 너비를 사용하므로 응답적으로 작동합니다.
표의 요소에 잘라내기를 적용해야 합니다.
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;
}
여기 일하는 Fiddle https://jsfiddle.net/d0xhz8tb/ 이 있습니다.
자바스크립트가 가능하다면 당신이 출발점으로 사용할 수 있는 빠른 루틴을 짜겠습니다.창 크기 조정 이벤트에 대응하여 스팬의 내부 너비를 사용하여 셀 너비를 동적으로 조정합니다.
현재는 각 셀이 보통 행 폭의 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);
}
});
});
문제는 균일한 간격의 고정 너비 열을 만드는 'table-layout:fixed'입니다.그러나 이 css-property를 비활성화하면 테이블이 가능한 한 커지기 때문에(오버플로에 주목하는 것보다) 텍스트 오버플로가 삭제됩니다.
죄송하지만 이 경우 프레드는 케이크를 먹을 수 없습니다.집주인이 셀디토에게 일을 할 수 있는 공간을 주지 않는 한 프레드는 그의 것을 사용할 수 없습니다.
다음과 같이 특정 열을 "가중치"로 지정할 수 있습니다.
<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>
당신이 이해합니다.
네, 30dot이 가지고 있습니다, js 방식을 사용하지 않으면 방법이 없습니다.두 셀이 모두 아파트에 비해 너무 커졌을 때 어떤 일이 일어나는지 등 복잡한 렌더링 조건을 말하고 있는 것입니다. 예를 들어, 두 셀이 모두 아파트에 비해 너무 커졌을 때 누가 우선 순위를 갖는지 결정하거나 단순히 면적의 백분율만 부여해야 하며, 너무 꽉 찼을 경우 둘 다 해당 영역을 차지하게 되며, 하나의 공간이 비어 있는 경우에만 해당 영역을 차지하게 됩니다.다른 쪽 감방에서 다리를 뻗으면, 어느 쪽이든 css로 할 방법이 없습니다.비록 사람들이 내가 생각하지 못한 CSS로 하는 꽤 재미있는 일들이 있습니다.하지만 당신이 이것을 할 수 있을지 정말 의심스럽습니다.
샘플 편향 답변과 마찬가지로, 자바스크립트가 허용 가능한 답변이라면, 저는 특별히 이 목적을 위해 jQuery 플러그인을 만들었습니다. https://github.com/marcogrcr/jquery-tableoverflow
플러그인을 사용하려면 다음과 같이 입력합니다.
$('selector').tableoverflow();
전체 예제: http://jsfiddle.net/Cw7TD/3/embedded/result/
편집:
- IE 호환성을 위해 jsfiddle에서 수정합니다.
- 브라우저 호환성 향상을 위해 jsfiddle을 수정합니다(Chrome, Firefox, IE8+).
이 질문은 구글에서 상단에 뜨기 때문에 저의 경우 https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ 의 cs 스니펫을 사용했지만 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; }
CSS 해킹을 좀 해봐요.display: table-column;구조할 수 있습니다.
.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;
}<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>JSFiddle: http://jsfiddle.net/blai/7u59asyp/
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>
<table style="table-layout: fixed; max-width: 100%;">
<tr>
<td>
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">This cells has more content</div>
</td>
<td>Less content here</td>
</tr>
</table>
오른쪽 셀의 너비를 필요한 최소 너비로 설정한 다음 왼쪽 셀 내부에 overflow-hidden+text-overflow를 적용할 수 있지만 여기서는 Firefox가 버그가 있습니다...
플렉스박스가 도움이 될 수 있지만
최근에 작업을 하고 있습니다.이 jsFiddle 테스트를 확인하고 기본 테이블의 너비를 변경하여 동작을 확인하십시오).
이 솔루션은 테이블을 다른 테이블에 내장하는 것입니다.
<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> </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>
프레드는 이제 셀디토의 확장에 만족하고 있습니까?
이것이 누군가에게 도움이 될지는 모르겠지만, 저는 각 열에 특정 너비 크기를 백분율로 지정하여 비슷한 문제를 해결했습니다.당연히, 각 열에 폭이 너무 넓지 않은 내용이 포함되어 있는 경우 가장 효과적일 것입니다.
같은 문제가 있었지만 여러 줄을 표시해야 했습니다(여기서).text-overflow: ellipsis;실패).나는 그것을 a를 사용해서 풉니다.textareaA안에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% 너비 셀 콜스팬을 5, 80%를 4, 20%를 1로 설정할 수 있습니다.
언급URL : https://stackoverflow.com/questions/5239758/how-can-i-truncate-table-cells-but-fit-as-much-as-content-possible
'programing' 카테고리의 다른 글
| MariaDB에서 SIGNAL을 제대로 사용할 수 없음 (0) | 2023.09.12 |
|---|---|
| MySQL 마스터를 슬레이브로 변경 (0) | 2023.09.12 |
| 시트 간의 차이점은 무엇입니까?Sheets(시트)를 선택합니다.활성화? (0) | 2023.09.12 |
| 일반 형식의 구성 요소 선언 (0) | 2023.09.12 |
| Pandas read_csv 기능에서 로드 시 라인을 필터링하려면 어떻게 해야 합니까? (0) | 2023.09.07 |