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>
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> </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 테이블 레이아웃이있는 컨테이너 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/
이 질문은 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>
you can set the width of right cell to minimum of required width, then apply overflow-hidden+text-overflow to the inside of left cell, but Firefox is buggy here...
although, seems, flexbox can help
I've been recently working on it. Check out this jsFiddle test, try it yourself changing the width of the base table to check the behavior).
The solution is to embedded a table into another:
<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>
Is Fred now happy with Celldito's expansion?
Don't know if this will help anyone, but I solved a similar problem by specifying specific width sizes in percentage for each column. Obviously, this would work best if each column has content with width that doesn't vary too widely.
I had the same issue, but I needed to display multiple lines (where text-overflow: ellipsis; fails). I solve it using a textarea inside a TD and then style it to behave like a table cell.
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;
}
}
Simply add the following rules to your td:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;
Example:
table {
width: 100%
}
td {
white-space: nowrap;
}
.td-truncate {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
max-width: 0;
}<table>
<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: If you want to set a custom width to another td use property min-width.
Given that 'table-layout:fixed' is the essential layout requirement, that this creates evenly spaced non-adjustable columns, but that you need to make cells of different percentage widths, perhaps set the 'colspan' of your cells to a multiple?
For example, using a total width of 100 for easy percentage calculations, and saying that you need one cell of 80% and another of 20%, consider:
<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로 설정할 수 있습니다.
참고 URL : https://stackoverflow.com/questions/5239758/css-truncate-table-cells-but-fit-as-much-as-possible
'IT story' 카테고리의 다른 글
| for 루프 내에서 JavaScript 클릭 핸들러가 예상대로 작동하지 않음 (0) | 2020.05.05 |
|---|---|
| baselineAligned를 false로 설정하면 LinearLayout의 성능이 어떻게 향상됩니까? (0) | 2020.05.05 |
| 파이썬과 IPython의 차이점은 무엇입니까? (0) | 2020.05.05 |
| PHP 7 이전에“문자열, 문자열이 주어져야한다”를 어떻게 해결합니까? (0) | 2020.05.05 |
| Excel의 수식에서 빈 셀 반환 (0) | 2020.05.05 |