問題描述
我想實(shí)現(xiàn)的效果是當(dāng)前div的文本內(nèi)容超過2行時(shí)辕近，用...來代替剩余未顯示的部分
矛盾點(diǎn)
網(wǎng)上介紹了一種很二B實(shí)現(xiàn)多行文本溢出的方法封孙，雖然很二，還是決定試一試
.test {
background-color: red;
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
我在純的html文件中測試過讽营，ok虎忌，是沒有問題的，但在項(xiàng)目中卻不能實(shí)現(xiàn)橱鹏，后面沒有....顯示
問題解決
Q1:為什么會(huì)沒有顯示膜蠢？
A1:打開瀏覽器的控制臺(tái)，發(fā)現(xiàn)瀏覽器根本就沒有識(shí)別到屬性-webkit-box-orient: vertical;
為什么會(huì)識(shí)別不到這個(gè)屬性呢莉兰？
- 首先這個(gè)方法可以在WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁面挑围，我用的是chrome瀏覽器，所以它是實(shí)現(xiàn)的
-
-webkit-line-clamp：2用來限制在一個(gè)塊元素顯示的文本的行數(shù)為2,它常見結(jié)合屬性：- display: -webkit-box; 必須結(jié)合的屬性 糖荒，將對象作為彈性伸縮盒子模型顯示
- -webkit-box-orient 必須結(jié)合的屬性 杉辙，設(shè)置或檢索伸縮盒對象的子元素的排列方式
- text-overflow: ellipsis;，可以用來多行文本的情況下捶朵，用省略號(hào)“…”隱藏超出范圍的文本
Q2: 懷疑是瀏覽器緩存的原因蜘矢？
A2:手動(dòng)清除了瀏覽器的緩存不行，又手動(dòng)重新打包综看，然后重新集成到后端品腹，還是不行。
Q3: 這個(gè)屬性不能被瀏覽器識(shí)別红碑，我查看了打包后的css代碼舞吭，果然打包后的代碼中是沒有這個(gè)屬性的，現(xiàn)在就有兩種可能：
- 用create-react-app 創(chuàng)建的項(xiàng)目中不能打包
-webkit-box-orient: vertical;這個(gè)屬性析珊，項(xiàng)目框架本省的問題羡鸥。 - 用ant-design 后，Ant-design 內(nèi)部的某個(gè)屬性將這個(gè)屬性給覆蓋了
A3:本地重新用create-react-app 創(chuàng)建了一個(gè)項(xiàng)目進(jìn)行嘗試忠寻，沒有引入庫ant-design兄春，結(jié)果發(fā)現(xiàn)在html中ok的但在這里仍舊不行。好了锡溯，找到問題了是在這里赶舆。網(wǎng)上搜索哑姚，在這里找到了答案
Q4:前面說這是一個(gè)二B 的方法，為什么呢芜茵？
A4: 首先使用的屬性是-webkit-line-clamp叙量；注意：這是一個(gè) 不規(guī)范的屬性，它沒有出現(xiàn)在 CSS 規(guī)范草案中九串。再者绞佩，它存在瀏覽器的兼容性問題.這種方式可能是更靠譜點(diǎn)的方法：
.test {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
.test::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}
反思
開始遇到這個(gè)問題的時(shí)候，網(wǎng)上各種搜索猪钮，結(jié)果都搜索不到品山，折騰了好久都沒有解決。最后烤低，跳過了這個(gè)問題肘交，用js的方法解決了我的問題。過了一天扑馁，回過頭來再來啃這個(gè)問題涯呻，用create-react-app 寫demo嘗試，才發(fā)現(xiàn)了問題腻要，根據(jù)問題才搜索到原因复罐。
action
- 找原因，如果不能確定雄家，不妨各種嘗試效诅，寫demo去發(fā)現(xiàn)和證明
- 搜索，不知道原因漫無目的的搜索不過是浪費(fèi)時(shí)間而已趟济。
- 給自己限定解決問題的時(shí)間填帽，如果一個(gè)小時(shí)還是沒有任何的頭緒，暫時(shí)放棄咙好，換個(gè)時(shí)間再來看這個(gè)問題篡腌，說不定會(huì)有新的思路。
