css文本兩行省略顯示

p {
    margin-top: 12px;
    width: 80px;
    height: 56px;
    line-height: 28px;
    color: #FFFFFF;
    font-size: 20px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    text-align: left;
    // 2行顯示省略號
    overflow: hidden;
    display: -webkit-box; 
    word-break: break-all;
    // 省略號顯示
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    // 在恰當的斷字點進行換行
    word-break: normal;
    // white-space屬性設置如何處理元素內的空白
    white-space: normal;
    // 允許長單詞換行到下一行
    word-wrap: break-word;
}

者 | 大澈

大家好，我是大澈！

租的房子快到期了，最近在忙著找房子。

不想白給中介巨額中介費，又想找個環境好價格實惠的，在青島這地真的不算容易。

所以說找房子，也是個十分需要思考分析的事情。于是我做了如下計劃：抓重點、抓剛需、排除不必要的需求、冷靜分析、果斷入手。

論程序員的租房手段，寄所有正在租房的同道中人！

ONE

需求分析，問題描述

一、需求

一個表格，分表頭、表體、表尾三部分。

當每個單元格的內容過長超出時，需要省略，用省略號代替超出的部分。

同時，當鼠標移入上去時，會在上方彈出一個小提示框，其內部可以展示完整的對應內容，當鼠標移出時，隱藏小提示框。

二、問題

1、表頭如何實現省略提示效果？

2、表體如何實現省略提示效果？

3、表尾如何實現省略提示效果？

4、如何實現單行省略和多行省略？

TWO

解決問題，答案速覽

實現代碼如下，復制粘貼即可直接使用。

一、表頭實現

表頭實現的關鍵，在于在每一欄中插入表頭插槽，并自定義內部的內容。

如果你有時間，具體代碼分析、知識總結，可見第三部分。

1<!-- 模版代碼 -->
 2<el-table-column prop="principal">
 3 <!-- 表頭插槽 -->
 4 <template #header>
 5 <!-- 小提示框 -->
 6 <el-tooltip :disabled="isShowTooltip" content="Principal Repayment" placement="top">
 7 <!-- 單行省略樣式、鼠標移入事件 -->
 8 <div class="singe-line" @mouseover="onMouseOver($event.target)">Principal Repayment</div>
 9 </el-tooltip>
10 </template>
11 <!-- 表體插槽 -->
12 <template #default="scope">{{ scope.row.principal }}</template>
13</el-table-column>
14
15// 邏輯代碼
16// Tooltip是否禁用標識 默認禁用
17const isShowTooltip=ref(true)
18// 表格鼠標移入事件
19const onMouseOver=(target: any)=> {
20 // 判斷是否開啟tooltip功能
21 if (target.scrollWidth > target.clientWidth) {
22 isShowTooltip.value=false;
23 } else {
24 isShowTooltip.value=true;
25 }
26}
27
28// 樣式代碼
29// 單行文本省略
30.singe-line {
31 text-overflow: ellipsis;
32 overflow: hidden;
33 word-break: break-all;
34 white-space: nowrap;
35 }

二、表體實現

表體實現的關鍵，在于在每一欄中添加show-overflow-tooltip屬性，當內容過長被隱藏時顯示tooltip小提示框。

如果你有時間，具體代碼分析、知識總結，可見第三部分。

1<el-table-column fixed prop="date" label="No" width="60" show-overflow-tooltip>
2</el-table-column>

三、表尾實現

表尾實現的關鍵，在于通過獲取表尾元素，為其追加一個tooltip小提示框子元素，并為其綁定指定列的內容和鼠標移入移出事件。

該實現方式為原生js實現，代碼比較冗余。大澈并沒有找到最優的答案，網上對此問題的描述也很少，如果看到這有最優解的朋友，感謝留言，已幫助更多其他朋友！

如果你有時間，具體代碼分析、知識總結，可見第三部分。

1<!-- 模版代碼 -->
 2<el-table :data="tableData" border show-summary :summary-method="getSummaries" style="width: 100%" max-height="500">
 3</el-table>
 4
 5
 6// 邏輯代碼
 7// 合計數據
 8let sumsValue=[] as any
 9
 10// 表格合計列邏輯
 11const getSummaries=(param: SummaryMethodProps)=> {
 12 const { columns, data }=param
 13
 14 const sums: string[]=[]
 15 columns.forEach((column, index)=> {
 16 // 第0列
 17 if (index===0) {
 18 sums[index]=t('pdCalculateLoan.Total')
 19 return
 20 }
 21
 22 // 最后一列
 23 if (index===columns.length - 1) {
 24 sums[index]=''
 25 return
 26 }
 27
 28 const values=data.map((item)=> Number(item[column.property]))
 29 if (!values.every((value)=> Number.isNaN(value))) {
 30 sums[index]=values.reduce((prev: any, curr: any)=> {
 31 const value=Number(curr);
 32 if (!isNaN(value)) {
 33 // 合計計算
 34 return prev + curr;
 35 } else {
 36 return prev;
 37 }
 38 }, 0);
 39 } else {
 40 sums[index]=''
 41 }
 42 })
 43
 44 // 存儲合計數據
 45 sumsValue=sums
 46
 47 return sums
 48}
 49
 50// 添加表格底部文本提示
 51const handleTableFootTooltip=()=> {
 52 // 加延時器，防止拿不到元素
 53 setTimeout(()=> {
 54 try {
 55 // 獲取表格底部元素
 56 let tableCellNodeArr=document.querySelectorAll('.el-table__footer-wrapper .el-table__footer td.el-table__cell')
 57
 58 //創建節點元素節點
 59 let tooltipOne=document.createElement('div');
 60 let tooltipTwo=document.createElement('div');
 61 let tooltipThree=document.createElement('div');
 62
 63 // 元素賦值
 64 tooltipOne.innerHTML=`${sumsValue[1]}`
 65 tooltipOne.className='tooltip'
 66 tooltipTwo.innerHTML=`${sumsValue[2]}`
 67 tooltipTwo.className='tooltip'
 68 tooltipThree.innerHTML=`${sumsValue[3]}`
 69 tooltipThree.className='tooltip'
 70
 71 tableCellNodeArr[1].onmouseover=()=> {
 72 tooltipOne.style.display='block'
 73 }
 74 tableCellNodeArr[1].onmouseout=()=> {
 75 tooltipOne.style.display='none'
 76 }
 77 tableCellNodeArr[2].onmouseover=()=> {
 78 tooltipTwo.style.display='block'
 79 }
 80 tableCellNodeArr[2].onmouseout=()=> {
 81 tooltipTwo.style.display='none'
 82 }
 83 tableCellNodeArr[3].onmouseover=()=> {
 84 tooltipThree.style.display='block'
 85 }
 86 tableCellNodeArr[3].onmouseout=()=> {
 87 tooltipThree.style.display='none'
 88 }
 89
 90 // 追加子元素
 91 tableCellNodeArr[1].append(tooltipOne)
 92 tableCellNodeArr[2].append(tooltipTwo)
 93 tableCellNodeArr[3].append(tooltipThree)
 94 } catch (error) {
 95 // 捕獲錯誤
 96 console.log(error);
 97 }
 98 }, 500)
 99}
100
101onMounted(()=> {
102 handleTableFootTooltip()
103})
104
105
106// 樣式代碼
107:deep .el-table__footer-wrapper {
108 overflow: visible;
109
110 // 表格底部
111 .el-table__footer {
112 td.el-table__cell {
113 position: relative;
114
115 // 單行文本超出省略
116 div {
117 text-overflow: ellipsis;
118 overflow: hidden;
119 word-break: break-all;
120 white-space: nowrap;
121 }
122
123 // 畫提示框
124 .tooltip {
125 display: none;
126 width: 100%;
127 padding: 6px 0;
128 border-radius: 5px;
129 background-color: #313133;
130 text-align: center;
131 color: #fff;
132 position: absolute;
133 top: -40px;
134 left: 0;
135 overflow: visible;
136 font-size: 12px;
137 font-family: Poppins-Regular;
138
139 // 畫小三角
140 &::before {
141 content: "";
142 display: block;
143 position: absolute;
144 left: 45%;
145 bottom: -16px;
146 border-width: 10px;
147 border-style: solid dashed dashed dashed; 
148 border-color: #313133 transparent transparent transparent; 
149 }
150 }
151 }
152 }
153 }

THREE

問題解析，知識總結

一、表頭如何實現省略提示效果？

表頭實現使用了Table-column的header插槽，在其內部放入Tooltip文字提示框組件，Tooltip組件的內容為需要展示的完整內容，而在Tooltip組件內部的元素，則是需要超出省略的內容。

為超出省略的內容元素添加鼠標移入事件，當目標元素的可滾動寬度，即實際寬度+隱藏寬度，大于目標元素的實際寬度時，說明內容元素已超出省略，此時Tooltip組件啟用，反之Tooltip組件禁用隱藏。

Table-column的插槽說明如下：

二、表體如何實現省略提示效果？

表體實現的關鍵，在于在每一欄中添加show-overflow-tooltip屬性，當內容過長被隱藏時顯示tooltip小提示框。

show-overflow-tooltip屬性加在Table上，影響的將是全部列，加在Table-column上時，影響的將是指定列，這里可以根據具體業務需求添加。

show-overflow-tooltip屬性說明如下：

三、表尾如何實現省略提示效果？

表尾實現的關鍵，在于通過獲取表尾元素，為其追加一個tooltip小提示框子元素，并為其綁定指定列的內容和鼠標移入移出事件。

在表格合計回調里，先把合計數據存到數組變量中，然后通過獲取表尾元素，為其追加一個tooltip小提示框子元素，再依次將數組變量中的合計數據對應下標取出為其賦值，并通過鼠標事件和樣式顯示隱藏來控制其展示。

Table幾個屬性說明如下：

四、如何實現單行省略和多行省略？

1// 單行文本省略
 2 .singe-line {
 3 text-overflow: ellipsis; //文本超出顯示省略號
 4 overflow: hidden; //文本超出隱藏
 5 white-space: nowrap; //只保留一個空白，文本不會換行
 6 }
 7
 8 // 兩行文本省略
 9 .two-line {
10 display: -webkit-box; //將盒子轉換為彈性盒子
11 -webkit-box-orient: vertical; //文本顯示方式，默認水平
12 -webkit-line-clamp: 2; //設置顯示多少行
13 text-overflow: ellipsis; //文本超出顯示省略號
14 overflow: hidden; //文本超出隱藏
15 }

- END -

、HTML5設計哲學，它并不是規范優先的設計，它是“妥協式”的規范。

2、HTML5對元素大小寫不再嚴格區分，開發者可以隨意使用大小寫字符來定義HTML元素。

3、對于一份基本的HTML5文檔而言，它總有如下結構：

<!DOCTYPE html>

<html>

<head>

<!—此處還可插入其他meta、樣式單等信息à

</head>

<body>

頁面內容部分

</body>

</html>

4、不要在<html>和<head>之前插入任何內容！不要在</head>和<body>之間插入任何內容！不要在</body>和</html>之前插入任何內容。

5、HTML5保留的基本元素有如下幾個：

:定義HTML注釋，里面的內容會被當成注釋處理。

<html>:它是HTML5文檔的根元素。但HTML5允許完全省略這個元素。

<head>:它用于定義HTML5文檔的頁面頭部分。但HTML5允許完全省略這個元素。

<title>:用于定義HTML5文檔的頁面標題。

<body>:用于定義HTML5文檔的頁面主體部分，該標簽可以指定id、class、style等核心屬性，還可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件屬性，這些屬性用于指定JavaScript腳本。

6、幾乎所有的HTML元素都可指定id、style和class屬性。其中ID屬性用于為HTML元素指定一個唯一標識，該標識是通過DOM訪問HTML元素的重要途徑。Class 和style屬性是CSS樣式相關屬性。

7、<span>and <div>這兩個標簽很相像，只是前者默認是不會自動換行。使用的屬性值基本一樣。

8、<span/>、<div/>和<p/>三個元素都可以作為其他內容的“容器”，在默認情況下，<span/>不會導致換行，<div/>會導致換行，<p/>會產生出段落，段落之間會有更大的間距。更要注意的是<span/>和<p/>只能包含文本、圖像、超鏈接、文本格式化元素和表單控件等內容，<p/>可以<span/>，但<span/>不能包含<p/>;<div/>元素除了可以包含上面的這些內容外，還可以包含更多的元素。

9、<b>定義粗體，<i>定義斜體,<em>定義強調文本,<strong>定義粗體文本，在HTML5中，使用<strong.../>包起來的文本代表首重要的文本。<small>定義小號字體文本，在HMTL5中專門用于標識所謂的“小字印刷體”，通常用來標注諸如免責聲明、注意事項、法律規定和版權相關的聲明性文字。

10、<sup>定義上標文本，<sub>定義下標文本;<bdo>定義文本顯示的方向，該標簽也可以指定dir屬性，該屬性值只能是ltr或者rtl。

11、在HTML5中，空元素標簽不允許將開始標簽和結束標簽分開定義。空標簽有如下：area base br col command embed hr img input keygen link mata param source wbr。如果這些標簽開始和結束標簽分開寫是錯誤的。

12、可以省略結束標簽的元素：colgroup dt dd li optgroup option p rt rp thead tbody tfoot tr td th <p>

13、可以省略全部標簽的元素： html head body tbody。

在線咨詢

上一篇：HTML5網頁錄音和上傳到服務器，支持PC、Andr
下一篇：159人！部分事業編！江西多家單位招人

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css文本兩行省略顯示

您的項目需求