版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26230421/article/details/82908267
一、前言
首先看一下效果:
给了一大段文字,字体左边对齐,并且字体下方的虚线延伸到最右边对齐:
二、分析与解决
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;
}