2017.3.16 讀了前端早讀課程《如何用css實現(xiàn)多行文本省略顯示》，決定自己寫一下demo，并總結(jié)一下。
初讀想法：
A.最近剛學(xué)了css3的一些基礎(chǔ)知識，所以一開始看到這個標(biāo)題時，我是想用css3中
text-overflow：ellipse；不過只能實現(xiàn)單行文本顯示，實現(xiàn)效果如下：
代碼：
B.也想過用js實現(xiàn)，當(dāng)文本內(nèi)容超過元素的高度或?qū)挾葘崿F(xiàn)時，讓一個帶有省略號的模塊顯示出來。不過我還沒試下。
接下來，我就試下文章所說的方法：
首先先實現(xiàn)如圖效果：
#wrap .endWord{
width:80px;
background:rgba(78,199,81,0.4);
float:right;
position:relative;
top:-20px;/*top值根據(jù).endword大小進行調(diào)整*/
left:300px;}
將父元素wrap設(shè)置為overflow：hidden，看下效果：
接下來就將leftSide塊的寬度變小，并設(shè)置main的寬度為父元素的100%。（我在main塊里插入了一篇長文章，使其height大于父元素的height）
并將main左移5px，此時main能鋪滿整個父元素，但此時endWord塊去哪了？？？？
#wrap{
width:400px;
height:200px;
margin:20px auto;
}
#wrap .leftSide{
width:5px;
height:100%;
float:left;
}
#wrap .main{
width:100%;
margin-left:-5px;//將main左移5px
float:right;
}
#wrap .endWord{
width:100px;
position:realtive;
left:400px;
top:-20px;
}
看到下圖的時候，我是有點不想接受的?。。?！
我覺得出現(xiàn)這樣的原因有：將endWord塊設(shè)為position：relative時，它仍處于頁面流中，
將sideLeft寬度設(shè)為5px，然而此時endWord的寬度仍為100px；此時原本位置已放不下endWord。
所以要在原來的位置放置endWord塊，只能使其盒子模型小于等于leftSide的寬度。
故進一步改動endWord的css代碼
#wrap .endWord{
width:100px;
position:realtive;
left:400px;
top:-20px;
margin-left:-400px;
padding-right:5px;
}
可以用fireBug禁用下left:400px;top:-20px;看下效果
最終效果如下：
我再稍微改了下頁面的樣式，增一些交互行為：
當(dāng)文章內(nèi)容超過外層元素wrap高度時，顯示省略號，點擊省略號可實現(xiàn)全文本顯示，在文章結(jié)尾有個up標(biāo)簽，可點擊恢復(fù)原本頁面。
最終效果：
css代碼：
div,p,span{
padding:0px;
margin:0px; }
#wrap{
width:400px;
height:305px;
margin:20px auto;
border:1px solid #EFEFEF;
/*background-color:rgba(126,241,225,0.5);*/
background-image:linear-gradient(to bottom,#77DFE8,rgba(0,0,0,0.3));
clear:both;/*清楚浮動*/
overflow:hidden;
box-shadow:2px 3px 10px rgba(0,0,0,0.3);
}
#wrap .leftSide{
/*將寬度設(shè)為5px*/
width:5px;
height:100%;
/*background:rgba(231,51,118,0.3);*/
float:left;
}
#wrap .main{
/*使main占滿整個父元素*/
width:100%;
/*background:rgba(235,234,38,1);*/
float:right;
margin-left:-5px;
text-indent:2em;
font-size:15px;
line-height:30px;
}
#wrap .main .nameTab{
display:inline-block;
font-size:14px;
color:rgba(236,236,236,1.00);
text-align:center;
}
#wrap .endWord{
width:20px;
/*background:rgba(78,199,81,0.4);*/
float:right;
position:relative;
left:400px;
top:-20px;
/*設(shè)置，使其盒子模型=leftSide的寬度=5px*/
margin-left:-20px;
padding-right:5px;
cursor:pointer;
}
#up{
float:right;
color:rgba(44,225,172,1.00);
cursor:pointer;}
js操作：
//獲取wrap元素
//獲取wrap元素的高度，oject.syle.attr只能獲取內(nèi)聯(lián)樣式的值，用getComputedStyle獲取元素的高度
var wrapBox=document.getElementById('wrap');
var wrapBoxH=getComputedStyle(wrapBox,false)['height'];
//點擊省略號全文顯示
var endWordBox=document.querySelector('.endWord');
endWordBox.addEventListener('click',showF,true);
function showF(){
//h獲取main的高度，將wrap高度設(shè)置為main的高度
var object=document.querySelector('.main');
var height=getComputedStyle(object,false)['height'];
console.log(height);
wrapBox.style.height=height;
}
//點擊up文章收起
var upBox=document.querySelector('#up');
upBox.addEventListener('click',hideF,true);
function hideF(){
wrapBox.style.height=wrapBoxH;
}
