文本溢出处理

灰太狼 2022-02-05 02:17 312阅读 0赞

在做京东首页时，遇到京东新闻那一块，文本溢出需求做…处理

*  京东效果图  
    ![....][]
 *  html代码

<div class="jd_news">
                    <div class="news">
                        <div class="news_hd">
                            <h5 class="news_title">京东快报</h5>
                            <a href="#" target="_blank" class="news_more">更多<i class="news_more_icon"></i>
                            </a>
                        </div>
                        <ul class="news_list">
                            <li>
                                <a href="#" target="_blank" class="news_link">
                                    <span class="news_tag">热评</span>
                                    “华为良心机！ 5000mAh+128G,下滑更心动”
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" class="news_link">
                                    <span class="news_tag">热评</span>
                                    “华为宣布5G收费标准,多国运营商表示接受不了”
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" class="news_link">
                                    <span class="news_tag">热评</span>
                                    “买手机是选64G，还是128G？听听手机店老板怎么说”
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" class="news_link">
                                    <span class="news_tag">热评</span>
                                    “红米旗舰来了：4200mAh配骁龙855让米9心慌慌！”
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

*  css代码

/*京东快报*/
    .jd_news{
        height: 130px;
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
    }
    .news{
        margin-left: 15px;
    }
    .news_hd{
        padding: 8px 0 0;
        line-height: 13px;
    }
    .news_title{
        display: inline-block;
        font-size: 13px;
        color: #1e1e1e;
    }
    .news_more{
        float: right;
        top: 8px;
        font-size: 13px;
        color: #999;
        padding-right: 10px;
    }
    .news_more_icon{
        font-family: 'icomoon';
        font-style: normal;
        font-size: 13px;
    }
    
    /*新闻中心*/
    .news_list{
        width: 100%;
        position: relative;
        top: 10px;
    }
    news_list li{
        line-height: 21px;
    }
    .news_link{
        width: 100%;
        color: #666;
        display: block;
        overflow:hidden;
        text-overflow: ellipsis;/*文本溢出处理记得用定位，*/
        white-space:nowrap;
        height: 21px;
    }
    .news_tag{
        display: inline-block;
        font-size: 12px;
        height: 16px;
        width: 35px;
        color: #fff;
        border-radius: 2px;
        line-height: 16px;
        text-align: center;
        background-color: #e47f7f;
        margin-right: 6px;
    }

主要是使用text-overflow: ellipsis；overflow:hidden；设置，还有使用伪元素来处理文本溢出。

*  html

<p>
    sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶sf博技术分u收到货后顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    </p>

*  css

p{
    				display: -webkit-box;
    				-webkit-box-orient: vertical;
    				-webkit-line-clamp: 2;
    				overflow: hidden;
    				text-overflow: ellipsis;
    			}
    			
    			/*多行文本*/
    			p{
    				height: 30px;
    				overflow: hidden;
    				line-height: 2em;
    				border: 1px solid red;
    				position: relative;
    			}
    			p::after{
    				content: "....";
    				position: absolute;
    				right: 0;
    				bottom: 0;
    				padding: 0px 8px 0px 10px;
    				background-color: #fff;
    			}

伪元素就是在后面添加…然后放到p标签内容，p标签overflow: hidden;

[....]: /images/20220205/fab62f2ef20d41dab1326a6c026f4c07.png