在CSS表格單元格中顯示省略號

Question

我有一個包含多個單元格的100％寬度表。我希望這些單元格中的一個始終在一行white-space: nowrap中顯示其內容，並且如果內容超出表格單元格text-overflow: ellipsis，則在行尾顯示省略號。

我遇到的問題是，表格將停止與達到單元格內容時的合同。因此，單元格的最小寬度將總是其內容的寬度，而表格將作爲整體被推出。

我只是無法弄清楚如何解決這個問題：

我的HTML：

<div class="otrCompactView"> 
    <div class="otrLastEditTable"> 
     <div class="otrLastEditRow"> 
      <div class="otrLastEditor">LastEditor</div> 
      <div class="otrLastEdited">LastModified</div> 
     </div> 
    </div> 
    <div class="otrTitleRow otrRow"> 
     <div class="otrTitle">Title asdasdasdas asd asd asd asdas as asd </div> 
    </div> 
    <div vlass="otrTaskRow otrRow"> 
    </div> 
    <div class="otrColumnsRow otrRow"> 
     <div class="otrColumns"></div> 
    </div> 
</div> 

我的CSS：

.otrCompactView { 
    display: table; 
    background: yellow; 
    width: 100%; 
    height: 100%; 
} 

.otrRow { 
    display: table-row; 
} 

.otrLastEditTable { 
    display: table; 
    width: 100%; 
} 

.otrLastEditRow { 
    display: table-row; 
} 

.otrLastEditor { 
    display: table-cell; 
} 

.otrLastEdited { 
    display: table-cell; 
    text-align: right; 
} 

.otrTitle { 
    border: 1px dotted red; 
    min-width: 50px; 
    white-space: nowrap; 
} 

而對於直接測試小提琴：

http://jsfiddle.net/67B6G/

Answer 1

請問this look like what you're after？

updated

HTML

<div class='table'> 
    <div class='row'> 
     <div class='cell'>Something quite long</div> 
    </div> 
    <div class='row'> 
     <div class='cell'> 
      here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell. 
     </div>   
    </div> 
</div> 

CSS

.table{ 
    margin:0; 
    padding:0; 
    display:table; 
    table-layout: fixed; 
    width:100%; 
    max-width:100%; 
} 
.row{ 
    display:table-row; 
} 
.cell{ 
    display:table-cell; 
    border:1px solid grey; 
} 
.cell:last-child{ 
    white-space: nowrap; 
    overflow:hidden; 
    text-overflow: ellipsis;  
} 

Answer 2

這裏有一個辦法做到這一點，而無需使用table-layout: fixed，讓您保持動態寬度與jQuery。

HTML：

<div class="table"> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
    <div class="right">Lorem Ipsum</div> 
</div> 

在CSS，你用你的標準省略號的代碼，但添加max-width: 0（如相對於解釋here實際table元素）：

.table { 
    display: table; 
    width: 100%; 
} 

.left, .right { 
    display: table-cell; 
    padding: 0 5px 0 5px; 

    max-width: 0; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

如果你停在那裏，你最終會得到每個子女div佔家長總體寬度的50％，所以你仍然不會擁有適合內容的動態寬度。爲了彌補這一點，我修改了this code, which calculates the width of the text in an element,來計算寬度，然後使用它來動態設置右列的寬度。然後左欄將有省略號。

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com> 
$.fn.textWidth = function(text, font) { 
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); 
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); 
    return $.fn.textWidth.fakeEl.width(); 
}; 

$('.right').on('input', function() { 
    var $width = $(this).textWidth(); // Get width of text 
    $width += 10; // Add left and right padding 
    $(this).width($width); // Set width 
}).trigger('input'); 

請注意，上述代碼要求您考慮padding;否則，右欄也會有省略號。這是一個fiddle。

要在具有多行的表格中使用它，可以修改列中單元格的jQuery迭代次數，並將列的寬度設置爲列中最寬單元格的必需寬度。或者，如果你知道哪一個是最寬的，你可以直接指定jQuery來獲取它的寬度。