一、前言
首先看一下效果：
给了一大段文字，字体左边对齐，并且字体下方的虚线延伸到最右边对齐：
二、分析与解决
1. HTML部分
设定一个div，以便于后期把文字放入其中
<div class="line-content" id="cnnr-detail"> </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("<span class=\"cnnr-detail\">"+strTemp+"</span>"); }else{ var strTemp = str.substring(Math.ceil(i/2),Math.ceil((i+rowLength)/2)); if(self.getByteLength(strTemp) <= 1){ //break; }; $(location).append("<span class=\"cnnr-detail\""+ " style='text-align: left; text-align-last: left;'" +">"+strTemp+"</span>"); } } }, //获取这段文字的字节长度 getByteLength: function (str) { var len = str.length; var blen = 0; for(i=0; i<len; i++) { if ((str.charCodeAt(i) & 0xff00) != 0) { blen ++; } blen ++; } return blen; },
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; }
