文本溢出：省略號表細胞無寬度

Question

我想實現看起來像這樣的中間單元的響應表格的寬度text-overflow: ellipsis;：

| Button 1 | A one-lined text that is too long and has to be... | Button 2 |

整桌應該有width: 100%;到與設備一樣大。我不能在Button 1和Button 2上設置固定寬度，因爲應用程序是多語言的（儘管應該可以使用max-width）。

我可以嘗試任何我想要的，...只有當我設置固定寬度時纔會出現。如何在沒有JavaScript的幫助下告訴中間單元「使用可用空間」？

Answer 1

[更新] 我的道歉，似乎不工作「就是這樣」：http://jsfiddle.net/kQKfc/1/

會離開它雖然這裏，因爲它的某些情況下，它的伎倆我們。
[/更新]

我們有這個CSS在我們的項目，給它一個鏡頭：

.nowr 
{ 
    display: block; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Answer 2

這是不是一個真正的乾淨的解決方案，但它不使用JS和每一個瀏覽器我的作品經過測試。

我的解決方案在於將單元格的內容包裝在table-layout: fixed和width: 100%的表格中。

查看demo。

下面是完整的解決方案：

<table class="main-table"> 
    <tr> 
     <td class="nowrap">Button 1</td> 
     <td> 
      <table class="fixed-table"> 
       <tr> 
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td> 
       </tr> 
      </table> 
     </td> 
     <td class="nowrap">Button 2</td> 
    </tr> 
</table> 

.main-table { 
    width: 100%; 
} 

.fixed-table { 
    /* magic */ 
    width: 100%; 
    table-layout: fixed; 

    /*not really necessary, removes extra white space */ 
    border-collapse: collapse; 
    border-spacing: 0; 
    border: 0; 
} 
.fixed-table td { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.nowrap { 
    /* used to keep buttons' text in a single line, 
    * remove this class to allow natural line-breaking. 
    */ 
    white-space: nowrap; 
} 

---

這不是真的清楚什麼是對側鍵的意圖，所以我用white-space: nowrap，讓他們在同一線。根據使用情況，您可能更願意應用min-width並自然讓他們換行。

Answer 3

在桌子上設置你的寬度爲100％，並指定一個fixed表格的佈局：

table { 
    width: 100%; 
    table-layout: fixed; 
} 

然後，設置取下列表格單元格應該有省略號：

td:nth-child(2) { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

瞧！響應式表省略號溢出！

演示：http://jsfiddle.net/VyxES/

Answer 4

的清潔器的方法是簡單地設置對TD一個最大寬度。

基於@法布里西奧磨砂的答覆，

http://jsfiddle.net/V83Ae/89/

<table class="main-table"> 
<tr> 
    <td class="nowrap">Button 1</td> 
    <td class="truncate"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td> 
    <td class="nowrap">Button 2</td> 
</tr> 

而且

body { margin: 0; } 

.main-table { 
    width: 100%; 
} 

.truncate { 
    text-overflow: ellipsis; 
    white-space : nowrap; 
    overflow  : hidden; 
    max-width : 100px; /* Can be any size, just small enough */ 
} 

.nowrap { 
    white-space: nowrap; 
} 

我不知道爲什麼這個工作，但這樣做，因此，如果有人可以計算出爲什麼應用最大寬度的原因，然後請讓我知道，因爲我是通過ac做的意外事件。

Answer 5

經過幾個小時的轟動，沒有解決方案，終於找到了它。

你想要的基礎溢出的元素是最小/最大寬度，其中最大值低於最小寬度。然後，您可以溢出語言或其子項，您可以在其中選擇任何方式進行設置：％，px，auto。

我在多個棘手的情況下嘗試過它，它在所有方面都有效。

我會嘗試用我的例子發佈一個幻燈片，但這應該會幫助你去。

/* Apply on base element for proper overflow */ 
max-width: 1px; 
min-width: 10000px; 

/* Apply on self or child, according to need */ 
width: 100%; 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 

Answer 6

HTML

<tr> 
    <td> 
     <span class="ellipsis"> A very looooooooooooooooooooooooooooooong string</span> 
    </td> 
</tr> 

CSS

td { 
    position: relative; 
} 

.ellipsis { 
    /*Here is the trick:*/ 
    position: absolute; 
    width: 100%; 
    /*End of the trick*/ 

    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

Answer 7

Here you go

<div class="container"> 
    <div> 
    Button 1 
    </div> 
    <div class="fill"> 
    <div class="lockText"> 
     A one-lined text that is too long and has to be... 
    </div> 
    </div> 
    <div> 
    Button 2 
    </div> 
</div> 

訣竅是建立一個表的佈局與第一佔用剩餘空間中的小區（ CSS桌子，介意你！） 。

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

.container > div { 
    display: table-cell; 
    white-space: nowrap; 
    position : relative; 
    width : auto; 

    /*make it easier to see what's going on*/ 
    padding : 2px; 
    border : 1px solid gray; 
} 

.container > .fill { 
    width : 100%; 
} 

然後添加您的限制自己的文本。

.lockText { 
    position : absolute; 
    left : 0; 
    right : 0; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}