前端——把一大段文字显示在前端并且有文字下面有虚线

一、前言

首先看一下效果：

给了一大段文字，字体左边对齐，并且字体下方的虚线延伸到最右边对齐：

二、分析与解决

1. HTML部分

设定一个div，以便于后期把文字放入其中

2. JS部分

我们获取到这段文字之后，需要对其进行处理

//文字是否有换行符
strReset: function (str, location, rowLength) {
    var self = this;
    $(location).html("");
    if(str.search("\n") != -1){
        var strArray = str.split(/\n/g);
        for(var i = 0; i < strArray.length; i++){
            var stri = strArray[i];
            self.moreRowsReset(stri, location, rowLength);
        }
    } else {
        self.moreRowsReset(str, location, rowLength);
    }
},
//大段文字整理，每行有多少个字符，并且循环append添加到设定的div下
moreRowsReset: function (str, location, rowLength) {
    var self = this;
    var len = str.length;
    var lenByte = self.getByteLength(str);
    var k = rowLength;
    for(var i = 0; i < lenByte; i+=rowLength){
        //如果这一段文字为空的话，直接break
        if(str.substring(Math.ceil(i/2)).length === 0){
            break;
        }
        //判断是否为最后一行
        if(lenByte - i > rowLength){
            var strtemp = str.substring(Math.ceil((i+rowLength)/2));
            //var reg = new RegExp("[\\u4E00-\\u9FFF]+$","g");
            //var reg =/\p{P}/;
            var reg = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/;
            //如果每行的字数有变化，就把行数变回到原来的字数
            if(k - rowLength == 4){
                rowLength+=4;
            }
            //判断行首是否为标点符号
            if(reg.test(strtemp.charAt(0))){
                rowLength-=4;
            }
            var strTemp = str.substring(Math.ceil(i/2),Math.ceil((i+rowLength)/2));

            $(location).append(""+strTemp+"");

        }else{
            var strTemp = str.substring(Math.ceil(i/2),Math.ceil((i+rowLength)/2));
            if(self.getByteLength(strTemp) <= 1){
                //break;
            };
            $(location).append(""+strTemp+"");
        }
    }
},
//获取这段文字的字节长度
getByteLength: function (str) {
    var len = str.length;
    var blen = 0;
    for(i=0; i

3. CSS部分

左右对齐的样式：text-align: justify;        text-align-last: justify;

注意：每一行如果不超过指定的字节数时，我们使用左对齐，最后一行一定是左对齐，不然显示出来不好看，已经在JS里面设定了

style='text-align: left; text-align-last: left;'

/*外部div样式*/
.line-content{
    display: inline-block; /*内部使用块级*/
    overflow: hidden; /*隐藏滚动条*/
    vertical-align: top;
    width: 86%;
    padding: 0.1vh 0 0 0;
    color: #4fa6e5;
}
/*每一行的样式，设置两边对齐以及文字下面的虚线*/
.cnnr-detail{
    display: block;
    text-align: justify;
    text-align-last: justify;
    line-height: 2.3vw;
    padding-bottom: 0.4vw;
    border-bottom: rgb(18, 99, 160) dotted 0.1vw;
}

OK, GAME OVER!