table表格怎麼增加省略號功能

這次帶給大家table表格裡怎麼增加省略號功能，table表格裡增加省略號功能的注意事項有哪些，以下就是實戰案例，一起來看一下。

1.起因

接到需求，說如果table 裡的字太多就用省略號，很自然就想到text-overflow:ellipsis (，注意：overflow: hidden; text- overflow:ellipsis; white-space:nowrap 一定要一起用)，但是在table 中不起作用，立即百度，說要想起作用需給table元素設定table-layout: fixed ，果然起作用了。

2. text-overflow:ellipsis 運作的前提

一定要給容器定義寬度（重點）

如果少了overflow: hidden;文字會橫向撐到容易的外面

如果少了white-space:nowrap;文字會把容器的高度往下撐；即使你定義了高度，省略號也不會出現，多餘的文字會被裁切掉

如果少了text-overflow:ellipsis; 多餘的文字會被裁切掉，就相當於你這樣定義text-overflow:clip

3.上面重點的前提

一定要給容器定義寬度，這就是table-layout: fixed 起作用，而table-layout: auto(table元素預設auto ) 不起作用的原因，下面一段來自css2.1 中文版規格：

'table-layout'
Value:  auto | fixed | inherit
Initial:  auto
Applies to:  'table'和'inline-table'元素
Inherited:  no
#Percentages: N/A
Media:  visual
Computed value:  與指定值相同

'table-layout'屬性控制用於表格單元，行和列佈局的演算法。數值意義如下：
fixed: 用固定表格佈局演算法
auto: 用任意自動表格佈局演算法

(fixed和auto區別就是一個固定，一個自動)

#下文描述了這兩種演算法:

在固定表格佈局演算法中(fixed)，每列的寬度由下述規則決定：

一個width 屬性值不為'auto'的列元素所在的列寬度就設定為該寬度值

否則，由第一行中width 屬性值不為'auto'的單元格決定該列的寬度。如果單元格跨越了多個列，就把寬度分到這些列中(the width is divided over the columns)

所有剩餘列均分剩餘的水平表格空間(減去邊框或單元格間距)

3中說到，所有剩餘列均分剩餘的水平表格空間，實際情況就是table將剩餘列的寬度平均分，固定每列的寬度就是剩餘寬度/剩餘列數，text-overflow :ellipsis 運作的前提是一定要給容器定義寬度，所以fixed起作用了

在自動表格佈局演算法中(fixed)，列寬由下列步驟決定：

計算每個單元格的最小內容寬度(MCW)：格式化的內容可以跨越任意多行，但不能從單元格溢出。如果單元格指定的'width'(W)大於MCW，W就是最小單元格寬度。 'auto'值表示MCW是最小單元格寬度，然後，計算每個單元格的“最大”寬度：格式化內容，不考慮除顯式換行外的換行

對於每一列，從只跨越該列的儲存格中決定一個最大和最小列寬。最小列寬是最小單元格寬度中最大的那個所需要的最小列寬（或者列'width'，看哪個更大）。最大列寬是最大單元格寬度中最大的那個所需要的最大列寬（或者列'width'，看哪個更大）

對於每個跨越多列的單元格，增加它跨越的列的最小寬度，讓它們至少與單元格一樣寬。對於最大寬度也這樣處理。如果可能的話，把跨越的所有列再擴寬差不多相同寬度

對於每個'width'不為'auto'的列組元素，增加它跨越的列的最小寬度，讓它們至少與列組的'width'一樣寬

其實有些事很簡單，但說起來就是繞嘴。 。 。在
1中說到，如果單元格指定的'width'(W)大於MCW，W就是最小單元格寬度。 'auto'值表示MCW是最小單元格寬度。

**情況一：當W > MCW時，W是最小單元格寬度，說明 列寬 = W，列寬 裝得下文字，用不上省略號。
情況二：當W < MCW時，MCW是最小單元格寬度時，說明 列寬 = MCW，但是這個MCW是文字撐滿下計算出來的，既然是撐滿，用省略號幹嘛。 。 。
**
要想在不使用table-layout:fixed的情況下，即table-layout:auto前提下用ellipsis，可以像下面這樣做(在td裡再套一個元素，對這個元素設定ellipsis)

<style>div {  width: 100px;
}.ellipsis {  text-overflow:ellipsis;  overflow: hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}</style>...<td>
  <div class="ellipsis">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  </div></td>...

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

如何使用偽元素first-letter讓文字首字母大寫

css的Counters屬性詳解

#

JavaScript的函數重載詳解

前後端資料應該如何科學交互

以上是table表格怎麼增加省略號功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！