javascript - 问一个css布局问题,想了很久都不知道咋做,看图
PHP中文网
PHP中文网 2017-04-11 10:44:19
0
5
417

这是个比较多见的需求,文字超过三行后显示省略号,然后箭头打开或关闭显示更多

以前都是直接用下面的代码显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

但是这次这个箭头的位置不好弄啊,怎么写才能跟图上的效果一样呢?就是说箭头也是在第三行文字后面

补充一下,现在最主要的问题是:
图上前两行文字宽度比如为100%,第三行文字会显示省略号,但是箭头不能盖住第三行文字,而且我们也不知道省略号出现在哪个位置


这个地方如果用简单的定位箭头位置,会造成箭头盖住文字的情况

PHP中文网
PHP中文网

认证高级PHP讲师

reply all(5)
伊谢尔伦

绝对定位~
父元素position: relative;

加载更多: position: absolute; bottom: 0; right: 0;

大家讲道理
< p relative >
  文字
  < img src='箭头' absolute  bottom:0;right:0 />
< /p >
迷茫

把文字分成两部分,前面两行放一个p里面,第三行一个p,且其最大宽度不超过箭头。

Ty80

装文字的p的给一个padding-right,给箭头腾出位置,但是这样箭头就不会再前两行文字下方了。

巴扎黑
<dl>
    <dt>这是标题啊</dt>
    <dd>
        这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊这里面才是内容区域啊
        <p>
            <i>...</i>
            <span></span>
        </p>
    </dd>
</dl>
dl {
    width: 100%;
    padding: 15px 12px;
    font-size: 0;
}
dt {
    color: #333;
    line-height: 15px;
    font-size: 15px;
    margin-bottom: 3px;
}
dd {
    width: 100%;
    height: 66px;
    font-size: 12px;
    color: #676767;
    line-height: 1.9;
    overflow: hidden;
    background-color: #fff;
    position: relative;
}
p {
    width: 60%;
    position: absolute;
    height: 22px;
    bottom: 0;
    right: 0;
    overflow: hidden;
    background-color: #fff;
    text-align: justify;
    font-size: 0;
}
i {
    float: left;
    font-size: 14px;
    line-height: 22px;
    vertical-align: middle;
}
span {
    float: right;
    margin-right: 12px;
    width: 12px;
    height: 12px;
    border-top: 2px solid blue;
    border-right: 2px solid blue;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

不影响js扩展~~

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!