我試圖在每個單元格最多顯示一行（文本）內容的表（使用Bootstrap的col-md-X給定列寬）。請參閱我的jsfiddle中的最後一個示例，瞭解我想要的示例。使用Bootstrap最多每行一行內容的大小表3

我用這個oneliner CSS類，限制顯示的文本量：

.oneliner { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

我有兩個問題：

當在單元格中的文本太長，它打破了大小我已經設定好了。它可以通過使用自定義大小類而不是自舉來修復，但我寧願避免使用這種方法，因爲生產表中的列的大小從col-md-1到col-md-12不等，而且它不能解決下一個問題：
當應用我的.oneliner class，它將所有文本放在一行中，拉伸父級（即使是使用我的自定義大小類），如果我在內應用<span>或<p>，則會發生事件。

的jsfiddle這裏：http://jsfiddle.net/85TjP/2/（更新）

我真的想避免使用JS這一點。

來源

2014-02-26 mnt

請參見下面的關於如何可以完成此的例子：

Fiddle

至關重要的應用下面的性質的元件將確保僅顯示一行文本和它不調整：

white-space: nowrap; 
overflow:hidden;

您可以使用下面的橢圓出現，如果任何文本溢出，只有視覺目的：

text-overflow: ellipsis;

HTML

<div class='table'> 
    <div class='row'> 
     <div class='cell'>Something quite long</div> 
     <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; 
    white-space: nowrap; 
    overflow:hidden; 
    text-overflow: ellipsis; 
}

來源

2014-02-26 14:25:48 SW4

謝謝，但我會喜歡更多的語義這樣做的方式（我畢竟是展示一張桌子）。我還希望堅持引導3（無需從boostrap複製css css到自定義類）。更不用說我的實例表沒有（不）限於兩列寬度相同的列。 – mnt

以上僅爲解釋性代碼示例。你能給一個實際的生產例子/ HTML？你是否試圖簡單地將'white-space：nowrap; overflow：hidden; text-overflow：ellipsis'應用到你想要的行爲的表格單元？ – SW4

是的，我嘗試添加這個CSS到我的表，沒有成功，我會更新問題和JSfiddle更精確的解釋 – mnt

沒關係，找到了解決辦法。

應用style="table-layout: fixed;"表修復這兩個問題，最終的HTML + CSS看起來像：

CSS

.oneliner { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

HTML

<table class="table" style="table-layout: fixed;"> 
    <tr> 
     <th class="col-md-6">Some title</th> 
     <th class="col-md-6">Other title</th> 
    </tr> 
    <tr> 
     <td>Short row</td> 
     <td class="oneliner">Much, much longer row, this is so long it's going to overflow</td> 
    </tr> 
</table>

當然table-layout : fixed;應該通過CSS應用

來源

2014-02-26 16:42:50 mnt

使用Bootstrap最多每行一行內容的大小表3

回答

Fiddle

相關問題