table表格裡怎樣增加省略符號功能

來源:互聯網
上載者:User
這次給大家帶來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的函數重載詳解

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.