js实现页面展示内容多余的用点代替

实现效果就是多余的内容用三个点表示,然后点击查看详情弹出来一个模态框展示全部内容,实现过程就是下面代码里的两个js方法,再替换前把全部内容存入到数组当中去,然后点击查看详情根据数组下标获取出对应的值.内容两边的div即style样式必须加上.如果想使用模态框的话,导入bootstrap的js和css就可以了,如果只想实现...的功能的话,用js里的正则表达式就可以.

 

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/witkey.css"></link>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/bootstrap-table.css"></link>
<script src="${pageContext.request.contextPath}/static/common/jquery-2.2.3.min.js"></script>
<link href="${pageContext.request.contextPath}/static/css/projectdetails.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
    
    .contentp{    /*这个样式是必须定义的*/
        height: 100px; 
        overflow: hidden;
        text-indent:35px;
    }

    .span1{
        margin-left: 400px;
    }
</style>
<div class="container">
    <c:forEach items="${app}" var="app" varStatus="th">
        <br>
        <div style="border:1px solid black;">
            <div class="row">
                <div class="col-xs-2">
                    <img style="width: 150px;text-align: center;"
                         src="${pageContext.request.contextPath}/uploads/logo/${app.logo}"/>
                </div>
                <div class="col-xs-7">
                    <p><a href="${pageContext.request.contextPath}/witkeyUserComplete/toCompleteDetails/${app.userId}">${app.corporateName}</a></p>
                    <p>
                        项目费用：${app.projectBudget}万元
                        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                        项目周期：${app.projectPeriod}月
                    </p>
                    <p>报名函   <span class="span1" onclick="viewDetails('${th.index}')">查看详情</span></p>
                    <div class="contentp"> <p>${app.applyContent}</p> </div>

                </div>
                <div class="col-xs-3">
                    <button class="btn btn-primary receivep" <c:if test="${app.createId!=sessionScope.witkeyUser.id}">disabled="disabled"</c:if>>
                        <c:if test="${app.applyStatus==1}">已报名</c:if>
                        <c:if test="${app.applyStatus==0}">雇佣此服务商</c:if>
                        <c:if test="${app.applyStatus==2}">已报名</c:if>
                    </button>
                    <img style="width: 210px;height:200px;text-align: center;"
                         src="${pageContext.request.contextPath}/uploads/logo/xinred.png"/>
                </div>
            </div>
        </div>
    </c:forEach>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body" id="model1">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭按钮</button>
                    <button type="button" class="btn btn-primary">保存按钮</button>
                </div>
            </div>
        </div>
    </div>
    <script>

        var contentArray = new Array();     //定义一个数组存放全部的内容
        $(function() {
            //解决报名函中内容太多，如果大于4行，用点点代替
            $(".contentp").each(function (i) {
                var divH = $(this).height();
                var $p = $("p", $(this)).eq(0);
                contentArray[i]=$p.text();    //把完整的内容存到数组中
                while ($p.outerHeight() > divH) {
                    $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
                }
                ;
            });
        });
        //模态框展示全部内容
        function viewDetails(i) {
            $("#model1").text(contentArray[i]);
            $("#myModal").modal("show");
        }
    </script>
</div>