표시된 내용을 시각적으로 자르려면 <td> 너비를 어떻게 설정해야 합니까?

StackOverflow https://stackoverflow.com/questions/480722

문제

하위 요소가 시각적으로 잘리는 지점에 도달할 때까지 잘 작동하는 테이블의 열 너비를 설정하려고 합니다.그러면 크기가 더 작아지지 않습니다.("시각적으로 잘림" - 맞지 않는 내용은 다음 열 뒤에 숨겨져 있는 것으로 나타남)

내 문제를 보여주는 몇 가지 샘플 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
    var intervalID = null;

    function btn_onClick()
    {
        // keep it simple, only click once
        var btn = document.getElementById("btn");
        btn.disabled = true;     
        // start shrinking
        intervalID = window.setInterval( "shrinkLeftCell();", 100);
    }

    function shrinkLeftCell()
    {
        // get elements
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");

        // initialize for first pass
        if( "undefined" == typeof( td1.originalWidth))
        {
            td1.originalWidth = td1.offsetWidth;
            td1.currentShrinkCount = td1.offsetWidth;
        }

        // shrink and set width size
        td1.currentShrinkCount--;
        td1.width = td1.currentShrinkCount;  // does nothing if truncating!

        // set reporting values in right cell
        td2.innerHTML = "Desired Width : [" 
                    + td1.currentShrinkCount 
                    + "], Actual : [" 
                    + td1.offsetWidth + "]";

        // Stop shrinking
        if( 1 >= td1.currentShrinkCount)
            window.clearInterval(intervalID);
    }
</script>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td id="td1">
                Extra_long_filler_text
            </td>
            <td id="td2">
                Desired Width : [----], Actual : [----]
            </td>
        </tr>
    </table>

    <button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>

나는 다음을 포함하여 다양한 방법으로 너비를 설정해 보았습니다.

td1.offsetWidth = td1.currentShrinkCount;

그리고

td1.width = td1.currentShrinkCount + "px";

그리고

td1.style.width = td1.currentShrinkCount + "px";

그리고 

td1.style.posWidth = td1.currentShrinkCount;

그리고 

td1.scrollWidth = td1.currentShrinkCount;

그리고 

td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;

그리고 

td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;

그리고 

td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;

DIV를 사용할 수도 있지만 테이블이 바인딩된 컨트롤에서 생성되기 때문에 사용하지 않는 것을 선호하고 asp.net 컨트롤을 다시 작성하고 싶지도 않습니다.

그렇긴 하지만, 나는 최후의 노력으로 최소한 각 'td1의 내용을 DIV로 래핑할 수 있고 오버플로로 인해 문제가 해결될 것이라고 생각했습니다.

<td id="td1">
    Extra_long_filler_text
</td>

~와 함께

<td id="td1" style="overflow:hidden;">
    <div style="margin=0;padding:0;overflow:hidden;">
        Extra_long_filler_text
    </div>
</td>

작동하지 않았습니다.

내용을 시각적으로 자르도록 너비를 설정하는 방법을 아는 사람이 있습니까?

그런데-내 대상 브라우저는 IE7입니다.다른 브라우저는 내부 앱이므로 지금은 중요하지 않습니다.

도움이 되었습니까?

해결책

방금 추가해봤는데 table-layout: fixed; ~로 <table> IE7에서는 저에게 효과적이었습니다.

고정 테이블 레이아웃에서 가로 레이아웃은 셀 내용이 아닌 테이블 너비, 열 너비에만 의존합니다.

확인해 보세요 문서.

다른 팁

CSS 솔루션

"Truncate"는 당신이 찾고 있는 단어가 아닐 수도 있습니다.넘쳐나는 문자를 숨기고 싶을 수도 있습니다.그렇다면 컨테이너의 선언된 제한을 넘어서 확장되는 모든 콘텐츠를 숨기는 CSS 속성 "오버플로"를 살펴보세요.

td div.masker {
  height:25px;
  width:100px;
  overflow:hidden;
}

<td>
  <div class="masker">
    This is a string of sample text that
    should be hidden when it reaches out of the bounds of the parent controller.
  </div>
</td>

자바스크립트 솔루션

실제로 컨테이너 내의 텍스트를 자르려면 오른쪽에서 한 문자를 제거하고 상위 너비를 테스트한 다음 상위 너비가 선언된 너비와 일치할 때까지 계속해서 문자를 제거하고 상위 너비를 테스트해야 합니다.

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}

<td id="td1" style="overflow-x:hidden;">

해야한다 

<td id="td1" style="overflow:hidden;">

Overflow-x는 현재 CSS3의 일부인 Microsoft CSS 속성입니다.나는 이전의 오버플로 속성을 고수하겠습니다.

편집하다:

Paolo가 언급했듯이 table-layout:fixed;도 추가해야 합니다.그리고 테이블의 너비를 지정합니다.전체 예제는 다음과 같습니다.

<html>
<head>
<style>
    table
    {

        table-layout:fixed;
        width:100px;
        }
td
{
    overflow:hidden;
    width:50px;
    border-bottom: solid thin;
    border-top:solid thin;
    border-right:solid thin;
    border-left:solid thin;

}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>

내가 아는 한, 표 셀은 내용을 수용할 수 있도록 항상 늘어납니다.

특정 양 이상의 콘텐츠가 포함된 테이블 셀의 데이터를 동적으로 자르는 Javascript를 사용하는 것에 대해 생각해 보셨나요?또는 서버 측에서 이 작업을 더 쉽게 수행할 수 있습니다.

jQuery 또는 일반 자바스크립트를 사용하여 셀 내용을 div 태그로 묶고 대신 고정 너비와 오버플로:숨김을 설정할 수 있습니다.아름답지는 않지만 효과가 있을 것입니다.

예상 시간:

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>

DIV는 경계 요소이므로 여기서 너비를 설정해야 합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top