在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何使用js顯示固定長度內(nèi)容顯示，默認(rèn)狀態(tài)顯示3行文本，點(diǎn)擊按鈕顯示更多

如何使用js顯示固定長度內(nèi)容顯示，默認(rèn)狀態(tài)顯示3行文本，點(diǎn)擊按鈕顯示更多

clipboard.png

有這么個(gè)需要，列表中顯示內(nèi)容，默認(rèn)顯示3行文字，文本內(nèi)容超出3行文字，顯示展開/收起箭頭

當(dāng)前的實(shí)現(xiàn)是截取固定長度的文本，使之最多顯示三行，現(xiàn)在遇到一個(gè)問題是，文本長度相同，文本
全是中文 和 不全是中文 所顯示的行數(shù)是不同，有沒有什么好的方式可以適應(yīng)

clipboard.png

我現(xiàn)在想到的一個(gè)笨方法是，逐個(gè)字符判斷，如果是中文的長度+2，如果是非中文的長度+1，然后在根據(jù)總數(shù)來截取不同的長度

PS：本方法只是個(gè)想法，還未進(jìn)行驗(yàn)證

環(huán)境要求:最低支持IE8

回答
編輯回答
尕筱澄

title

italic

2018年5月21日 04:06
編輯回答
笑浮塵

</servlet-mapping>
這個(gè)是前端控制器設(shè)計(jì)模式的實(shí)現(xiàn)，提供Spring Web MVC的集中訪問點(diǎn)，而且負(fù)責(zé)職責(zé)的分派，而且與Spring IoC容器無縫集成，從而可以獲得Spring的所有好處
DispatcherServlet主要用作職責(zé)調(diào)度工作，本身主要用于控制流程，主要職責(zé)如下：

文件上傳解析，如果請求類型是multipart將通過MultipartResolver進(jìn)行文件上傳解析；
通過HandlerMapping，將請求映射到處理器（返回一個(gè)HandlerExecutionChain，它包括一個(gè)處理器、多個(gè)HandlerInterceptor攔截器）；
通過HandlerAdapter支持多種類型的處理器(HandlerExecutionChain中的處理器)；
通過ViewResolver解析邏輯視圖名到具體視圖實(shí)現(xiàn)；
本地化解析；
渲染具體的視圖等；
如果執(zhí)行過程中遇到異常將交給HandlerExceptionResolver來解析。

load-on-startup：表示啟動(dòng)容器時(shí)初始化該Servlet；如果它存在，則它將在應(yīng)用程序啟動(dòng)時(shí)裝在servlet并調(diào)用它的init方法。若不存在，則在該servlet的第一個(gè)請求時(shí)加載。
url-pattern：表示哪些請求交給Spring Web MVC處理， “/” 是用來定義默認(rèn)servlet映射的。也可以如“*.html”表示攔截所有以html為擴(kuò)展名的請求。

該DispatcherServlet默認(rèn)使用WebApplicationContext作為上下文，Spring默認(rèn)配置文件為“/WEB-INF/[servlet名字]-servlet.xml”。
<listener>

2018年5月14日 18:56
編輯回答
瘋子范

我以前做過類似的，方法是固定顯示2行的高度，用一個(gè)標(biāo)簽（text為展開）固定顯示在右下角遮住原有的文字。JS控制點(diǎn)擊標(biāo)簽改變文字容器高度

2018年6月20日 21:13
編輯回答
枕頭人

換個(gè)設(shè)計(jì)展示形式吧， 就和移動(dòng)端字號自適應(yīng)，文字超出兩行必須加個(gè)詳情倆字一樣，很難受。

2017年5月10日 06:55
編輯回答
解夏

超出部分2行自動(dòng)換行，第二行是省略號 ：
text-overflow:
-o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

2017年4月26日 07:57
編輯回答
你的瞳

需要配置JS來判斷文字內(nèi)容是否超過設(shè)定的容器的初始高度，如果超過就設(shè)置折疊的CSS否者不設(shè)置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            position: absolute;
            left:10px;
            right:10px;
            width: 200px;
            border: 1px solid red;
            position: relative;
        }

        .content{
            font-size: 16px;
            line-height: 1.5;
            width: 100%;
            color: #556170;
            word-break: break-all;
            text-align: justify;
            margin: 0;
            position: relative;
        }

        .collapse .content::after{
            content: ' ... ';
            position: absolute;
            right: 0;
            bottom: 0;
            background: linear-gradient(to right, transparent, #ffffff 50%);
            padding-left: 20px;
        }

        .collapse .expand-collapse::after{
            content: '展開';
            display: block;
            color:red;
            width: 100%;
            text-align: right;
        }

        .expand .expand-collapse::after{
            content: '收縮';
            display: block;
            color:red;
            width: 100%;
            text-align: right;
        }

        .collapse .content{
            overflow: hidden;
            height: 50px;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>

<div class="container">
    <p class="content ">當(dāng)前的實(shí)現(xiàn)是截取固定長度的文本，使之最多顯示三行，現(xiàn)在遇到一個(gè)問題是，文本長度相同，文本
        全是中文 和 不全是中文 所顯示的行數(shù)是不同，有沒有什么好的方式可以適應(yīng)</p>
    <div class="expand-collapse"></div>
</div>
<script>

    var expandCollapseDiv;
    var containerBoundingClientRect=document.querySelector(".container").getBoundingClientRect();
    var contentBoundingClientRect=document.querySelector(".content").getBoundingClientRect();
    if(containerBoundingClientRect.height>50){
        document.querySelector(".container").setAttribute("class","container collapse");
    }else{
        document.querySelector(".container").setAttribute("class","container");

        document.querySelector(".container").removeChild(document.querySelector(".expand-collapse"))
    }


    document.querySelector(".container").addEventListener("click",function(){

        if(!expandCollapseDiv){
            expandCollapseDiv=document.querySelector(".expand-collapse");
        }
        console.log(event.target);
        if(event.target===expandCollapseDiv){
            if(document.querySelector(".container").getAttribute("class").split(" ").indexOf("collapse")!==-1){
                document.querySelector(".container").setAttribute("class","container expand");
            }else{
                document.querySelector(".container").setAttribute("class","container collapse");
            }

        }
    },false);
</script>
</body>
</html>
2018年7月25日 09:32