2017.3.16 读了前端早读课程《如何用css实现多行文本省略显示》，决定自己写一下demo，并总结一下。
初读想法：
A.最近刚学了css3的一些基础知识，所以一开始看到这个标题时，我是想用css3中
text-overflow：ellipse；不过只能实现单行文本显示，实现效果如下：
文本溢出
单行文本强制显示
代码：
css样式
B.也想过用js实现，当文本内容超过元素的高度或宽度实现时，让一个带有省略号的模块显示出来。不过我还没试下。
接下来，我就试下文章所说的方法：
首先先实现如图效果：
main内容超过父元素高度时。
将endword移动wrap的右下角
#wrap .endWord{
width:80px;
background:rgba(78,199,81,0.4);
float:right;
position:relative;
top:-20px;/*top值根据.endword大小进行调整*/
left:300px;}
main高度未超过父元素时
将父元素wrap设置为overflow：hidden，看下效果：
将父元素设置为overflow：hidden，main
接下来就将leftSide块的宽度变小，并设置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;
}
看到下图的时候，我是有点不想接受的！！！！
我觉得出现这样的原因有：将endWord块设为position：relative时，它仍处于页面流中，
将sideLeft宽度设为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;看下效果
最终效果如下：
我再稍微改了下页面的样式，增一些交互行为：
当文章内容超过外层元素wrap高度时，显示省略号，点击省略号可实现全文本显示，在文章结尾有个up标签，可点击恢复原本页面。
最终效果：
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{
/*将宽度设为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;
/*设置，使其盒子模型=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只能获取内联样式的值，用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高度设置为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;
}
网友评论