nvue中 实现文本两端对齐效果 的 js解决方案
一、 前言
在你因为搜索关键词来到我这篇文章时，相信你已经深深的感受到nvue格式对样式编写的局限性了。
比如，在nvue中不能用text-align：justify设置文本两端对齐。
本人发现这个样式不能使用后，思考了许多代替解决的方法。但最终却发现，这个nvue吧，简直是把css两端对齐的方法全堵死了！text-align：justify不能用，letter-spacing 改字间距也不能用。
可是吧，需求又有这个需求，也不能不做不是？
毕竟俺们上面某位对这种小细节很有强迫症，我们之前也都简简单单解决了，所以这次，人家不是技术哪管咱们到这个nvue格式下是真的干啥啥不行了。
因为在网上也找不到什么解决的方法，所以本着没有粮食就要自己动手才能丰衣足食的观念，本人根据nvue能使用的css条件，用js写了一个算法，从理清思路，到编写逻辑代码，这篇代码用了一天多。虽然这件事很吃力不讨好，代码写得也比较稚嫩，但是本人在这个过程中还是感觉收获良多的。（一定程度锻炼了思维逻辑能力）
而且这样也算有了个备选方案，不至于感觉无计可施。
以下会记录本人写下这篇代码的所有思路历程。有兴趣的同学可以看完我这些思路历程，一起进步~~ 比较赶时间的同学，就跳到结尾看代码和使用方法吧。
二、思路历程
1.确定可用条件并构思
首先，我们知道nvue格式是只能使用flex布局，即display属性仅能为flex，且默认 flex-direction: column。text-align：justify、letter-spacing不能使用，但是flex布局的justify-content: space-between确定能使用。
justify-content: space-between 可以均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 。 根据属性描述，这不就是有 '两端对齐’的概念在吗？
所以我就想到，能不能根据用这个属性去写一下算法呢？
根据条件，我的脑子生成了一个基本构思。
核心逻辑其实比较简单，也就是 将文本里的字符拆分成独立的块 用justify-content: space-between 让字符在父盒子里自适应两端对齐。
可以用这段简单的试验代码理解。
// template
<view class="box" >
<text>这</text>
<text>这</text>
<text>这</text>
<text>这</text>
<text>这</text>
<text>这</text>
<text>这</text>
<text>这</text>
<text>这</text>
<text>这</text>
<text>这</text>
</view>
// style
.box {
flex-direction: row;// nvue 默认 lex-direction: column，所以一定要改方向
flex-wrap: wrap;
width: 100rpx;
justify-content: space-between;
background-color: red;
}
确定思路，开始延展。
2.延展思路，编写逻辑，逐步优化
①将所有获取的文本拆分 splitLine()
//template
<view class="body">
<view class="box" v-for="(item,index) in newText">
<view v-for="it in item">
<text>{{it}}</text>
</view>
</view>
</view>
// style
.box{
flex-direction: row;
flex-wrap: wrap;
width: 200rpx;//需要手动调试,匹配宽度和合适的字符数
justify-content: space-between;
}
// script
export default {
data() {
return {
dataText: [
'这是什么呀？我完全看不到',
'这是什么呀？我完全看不到，好奇怪啊qwqwqwqwqwqwqwqwqwqwq',
'这是什么呀？我完全看不到，好奇怪啊qwqwqwqwqwqwqwqwqwqwq，老师你手机啊喜欢过的卡号',
'这是什么呀？我完全看不到，好奇怪啊qwqwqwqwqwqwqwqwqwqwq，老师你手机啊喜欢过的卡号11111',
],
newText: []
}
},
onLoad() {
this.splitLine()
},
methods: {
splitLine() {
var that = this
this.dataText.forEach((v, i) => {
//设定一行的字符数line_num=10，定该文本的字符数为 word_num
//（需要手动调出合适当前父文本宽度的字符数）
var word = v.split('')
var word_num = v.split('').length
var line_num=10
var newWord=[]
if (word_num < line_num) {
//1.字符内容不到一行字符串不拆分
newWord[0]=v
that.newText[i] =newWord
} else if ((word_num % line_num) < line_num) {
//2.字符内容大于一行，但末行的字符少于一行字符 则需要截取前面字符串拆分，将多余字符截取为数组最后元素
var newWord = v.substring(0, word_num - (word_num % line_num)).split('')
var endWord = v.substring(word_num - (word_num % line_num), word_num)
newWord.push(endWord)
that.newText[i] = newWord
} else {
//3.字符内容大于一行且末行字符等于一行，全字符拆分即可
that.newText[i] = word
}
})
},
}
}
但是，实践后发现，只判断字符数来拆分，会因为中文与英文和数字的字符位置占据大小不一样，导致出现每行字间距之间差异很大的情况，所以我们应该是去判断字节数而不是字符数
②优化判断思路，用 <计算字节> 替代 <计算字符> 判断
一段文本里可能会包含英文、数字、中文等，要根据文本内容去计算字节数，首先要理解字节概念。
前端主要为UTF－8编码，则字符串中的字节数，单个的字符，包括英文字符，数字，特殊字符（不包含emoji）等是一个字节，中文的汉字是两个字节。
//将是中文的部分，替换成两个英文，这样字节就全部都是普通的字节了，此时字节的长度就是字符串的长度。
getBytesLength(str) {
return str.replace(/[^\x00-\xff]/g, 'xx').length;
},
所以我将之前的代码用字节思维再优化下，写了第一版的 splitBytesLine()
（需要手动调出合适当前父文本宽度的字节数 byte ，就是合适的中文字符数 * 2）
splitBytesLine(arr,byte) {
//参数说明：arr为原文本数组，byte设定每行的合适字节数
var that = this
var newTextArr=[]
arr.forEach((v, i) => {
//计算字符串的字节数
var bytes_num = this.getBytesLength(v)
//将字符串拆分成数组
var word = v.split('')
//定义处理后的数组存放容器
var newWord=[]
//根据文本字节对于单行字节数的情况处理
if (bytes_num < byte) {
// 字节不到一行情况，不拆分,字符串全部存入数组
console.log('字节不到一行情况')
newWord[0]=v
newTextArr[i] = newWord
} else if ((bytes_num % byte) < byte) {
// 字节有多行,并且最后一行不足一行字节
console.log('字节有多行,并且最后一行不足一行字节')
var word_num = v.split('').length
// 先假设字节余数ys为偶数6 (带上具体数据更好理解，小括号有写上公式）
// 截取最后同余数ys同数的(6)字符计算字节，设为e
// 1.if e=6 (e=ys)，即最后字符皆为非中文字符，则截取文本 0至 word_num-ys【6】 拆分为数组，剩余字符串（6个字符）不拆分push进数组
// 2.if e=12 (e=ys*2)，即最后字符皆为中文字符，则截取文本 0至 word_num-(ys/2) 【3】 拆分为数组，剩余字符串（3个字符）不拆分push进数组
// 3.if 6<ys<12 (ys<e<ys*2)，即最后字符有中文字符和非中文字符，
// ① e%2为 0是偶数（8），截取文本 最后 e/2 的字符计算字节e2，if e2=ys,则截取文本0至 最后e/2; if e2<ys,截取word_num-（e/2 + 1） 至 word_num-(e/2 )字符计算字节k ==>> 如果k+e2>= ys,最终就截取文本 0至 word_num-（e/2 + 1） 拆分为数组,剩余字符串（e/2 + 1个字符）不拆分push进数组;
// 如果k+e2<ys,则继续截取word_num-（e/2 + 2） 至 word_num-（e/2 + 1）字符计算字节k2，直到（k+k2+...+kn）+e/2 >= ys,停止循环;
// if e2>ys,就截取 word_num-e/2至 word_num-（e/2 - 1）字符计算字节k ==> 如果 e2-k<=ys,就截取文本 0 至 word_num-（e/2 - 1）,如果e2-k>ys 就继续截取word_num-（e/2 -1） 至 word_num-（e/2 - 2）字符计算字节k2，直到e/2 -（k+k2+...+kn） <= ys,停止循环;
// ② e%2为 1是偶数（9）,截取文本 最后 e/2 +1 的字符计算字节e2,重复操作.
// 计算字节余数
var ys = bytes_num % byte
// 截取同字节余数数的最后字符
var jq = v.substring(word_num - ys, word_num)
// 计算最后字符的字节
var e = this.getBytesLength(jq)
if (e == ys) {
// 最后字符全是非中文字符情况
console.log('最后字符全是非中文字符情况')
var newWord = v.substring(0, word_num - ys).split('')
var endWord = v.substring(word_num - ys, word_num)
newWord.push(endWord)
newTextArr[i] = newWord
} else if (e == (ys * 2) ) {
// 最后字符全是中文字符情况
console.log('最后字符全是中文字符情况')
var newWord = v.substring(0, word_num - (ys / 2)).split('')
var endWord = v.substring(word_num - (ys / 2), word_num)
newWord.push(endWord)
newTextArr[i] = newWord
} else {
// 最后字符有中文字符和非中文字符情况
console.log('最后字符有中文字符和非中文字符情况')
if (e % 2) {
console.log('字节数为偶数情况')
// 字节数为偶数情况 // 目的:获取匹配余数ys的实际最后字符数截取文本,为优化效率,从中间截取左右加减,直到 ±k+e/2=ys
let jq2 = v.substring(word_num - (e / 2), word_num)
console.log(jq2)
var e2 = that.getBytesLength(jq2)
} else {
// 字节数为奇数情况
console.log('字节数为奇数情况')
let jq2 = v.substring(word_num - (e / 2)-1, word_num)
console.log(jq2)
var e2 = that.getBytesLength(jq2)
}
// 匹配最后字节的字符情况
if (e2 < ys) {
// 中位数值小于目标余数ys值,需要向左做加法
// 计算左边第一个单字符的字节
let jq3 = v.substring(word_num - (e / 2) - 1, word_num - (e / 2))
var k = that.getBytesLength(jq3)
// 逐步循环左边单字符并加上其字节数,直到字节数=余数ys,停止循环
for (let i = 1; i < (e / 2) + 1; i++) {
if (k + e2 >= ys) {
var newWord = v.substring(0, word_num - (e / 2) - i + 1).split('')
var endWord = v.substring(word_num - (e / 2 + i - 1), word_num)
break
} else {
let jq4 = v.substring(word_num - (e / 2) - i, word_num - (e / 2) - i + 1)
k = k + that.getBytesLength(jq4)
}
}
} else if (e2 > ys) {
// 中位数值大于目标余数ys值,需要向右做减法
// 计算右边第一个单字符的字节
let jq3 = v.substring(word_num - (e / 2), word_num - (e / 2) + 1)
var k = that.getBytesLength(jq3)
// 逐步循环右边单字符并减去其字节数,直到字节数=余数ys,停止循环
for (let i = 1; i < (e / 2) + 1; i++) {
if (e2 - k >= ys) {
var newWord = v.substring(0, word_num - (e / 2) + i + 1).split('')
var endWord = v.substring(word_num - (e / 2) + i + 1, word_num)
break
} else {
let jq4 = v.substring(word_num - (e / 2) + i, word_num - (e / 2) + i + 1)
k = k - that.getBytesLength(jq4)
}
}
} else {
var newWord = v.substring(0, word_num - (e / 2)).split('')
var endWord = v.substring(word_num - (e / 2), word_num)
}
newWord.push(endWord)
newTextArr[i] = newWord
}
} else {
// 字节有多行,且最后一行字节正好满一行,直接拆分成数组
console.log('字节有多行,且最后一行字节正好满一行,直接拆分成数组')
newTextArr[i] = word
}
})
return newTextArr
}
目前的算法可实现包含中文、英文、数字和*&%等特殊字符的文本两端对齐效果。
三、第一版算法的使用指南
①复制上面 splitBytesLine()，getBytesLength()方法到methods里。
②dataText 存放原文本，一个段落是一个数组元素。newTextDate 存放处理后的数组。调用方法，转换数据。
//template
data() {
return {
dataText: [
'这是什么呀？我完全看不到',
'这是什么呀？我完全看不到，好奇怪啊qwqwqwqwqwqwqwqwqwqwq',
'这是什么呀？我完全看不到，好奇怪啊qwqwqwqwqwqwqwqwqwqwq，老师你手机啊喜欢过的卡号',
'这是什么呀？我完全看不到，好奇怪啊qwqwqwqwqwqwqwqwqwqwq，老师你手机啊喜欢过的卡号11111',
],
newTextDate: []
}
},
onLoad() {
this.newTextDate=this.splitBytesLine(this.dataText,34)
//参数说明：(原文本数组，每行的合适字节数)
},
③html嵌套两层for，外层循环段落，内层循环段落里的每一个文字。
//template
<view class="body">
<view class="box" v-for="(item,index) in newText">
//循环段落
<view v-for="it in item">
//循环文字
<text>{{it}}</text>
</view>
</view>
</view>
④写上必填样式
// style
.box{
flex-direction: row;
flex-wrap: wrap;
width: 298rpx;//需要手动调试,匹配宽度和合适的字符数
justify-content: space-between;
}
因为写的文章跨了几天时间，写法很稚嫩，文章中的一些代码可能大概会出现匹配不上还是啥bug的情况，如果发现文章有问题或者有大佬想指导建议俺都非常欢迎嗷~
然后其实我已经写了第二版的算法，代码也越来越长了 ，可以兼容多了些情况 ，并封装起来用了，但是写成文章真的太麻烦了 ，不过后续我还是会继续更新的~
————————————————————————————————————————————————————————
第二版本算法
来了来了，我终于来更新了
第二版算法，新增可支持第一行字数不同的情况（用于第一行缩进两格之类的需求）
function splitBytesLine(arr, byte_one, byte) {
//参数说明：arr为原文本数组，byte_one设定第一行字节数,byte设定每行的合适字节数
var newText = []
arr.forEach((v, i) => {
var bytes_num = v.replace(/[^\x00-\xff]/g, 'xx').length
var word = v.split('')
var middle = 0
var newWord = []
var startWord = []
var word_num = v.split('').length
if (bytes_num > byte_one) {
// 兼容第一行特殊化情况
console.log("兼容第一行特殊化情况")
var jq = v.substring(0, byte_one)
// 计算最前byte_one个字符的字节
var e = jq.replace(/[^\x00-\xff]/g, 'xx').length
console.log(e)
console.log(jq)
if (e == byte_one) {
// 最前字符全是非中文字符情况
console.log("最前字符全是非中文字符情况")
startWord[0] = v.substring(0, byte_one - 1)
startWord[1] = v.substring(byte_one - 1, byte_one)
var middle = byte_one
} else if (e / 2 == byte_one) {
// 最前字符全是中文字符情况
console.log("最前字符全是中文字符情况")
startWord[0] = v.substring(0, byte_one / 2 - 1)
startWord[1] = v.substring(byte_one / 2 - 1, byte_one / 2)
var middle = byte_one / 2
} else {
console.log("最前字符有中文字符和非中文字符情况")
// 最前字符有中文字符和非中文字符情况
// 前byte_one个字符的字节大于byte_one，需要向左做减法
// 计算左边第一个单字符的字节
let jq3 = v.substring(byte_one - 1, byte_one)
var k = jq3.replace(/[^\x00-\xff]/g, 'xx').length
for (let i = 1; i < byte_one + 1; i++) {
if ((e - k) <= byte_one) {
startWord[0] = v.substring(0, byte_one - i - 1)
// startWord[1] = ''
startWord[1] = v.substring(byte_one - i - 1, byte_one - i)
var middle = byte_one - i
break
} else {
let jq4 = v.substring(byte_one - i - 1, byte_one - i)
k = k + jq4.replace(/[^\x00-\xff]/g, 'xx').length
}
}
}
}
console.log(startWord)
if (startWord.length) {
newWord = newWord.concat(startWord)
}
console.log(newWord)
var middleWord = []
var endWord = ''
if (bytes_num <= byte_one) {
console.log('字节不到一行情况')
newWord[0] = v
newText[i] = newWord
} else if (bytes_num < (byte_one + byte)) {
// 字节不到两行情况
console.log("字节不到两行情况")
endWord = v.substring(middle, word_num)
newWord.push(endWord)
newText[i] = newWord
} else if (((bytes_num - byte_one) % byte) < byte) {
// 字节有多行,并且最后一行不足一行字节
console.log("字节有多行,并且最后一行不足一行字节")
// 计算字节余数
var ys = (bytes_num - byte_one) % byte
console.log("余数", ys)
// 截取同字节余数数的最后字符
var jq = v.substring(word_num - ys, word_num)
// 计算最后字符的字节
var e = jq.replace(/[^\x00-\xff]/g, 'xx').length
if (e == ys) {
// 最后字符全是非中文字符情况
console.log("最后字符全是非中文字符情况")
var middleWord = v.substring(middle, word_num - ys).split('')
var endWord = v.substring(word_num - ys, word_num)
} else if (e == (ys * 2)) {
// 最后字符全是中文字符情况
console.log("最后字符全是中文字符情况")
var middleWord = v.substring(middle, word_num - (ys / 2)).split('')
var endWord = v.substring(word_num - (ys / 2), word_num)
} else {
// 最后字符有中文字符和非中文字符情况
console.log("最后字符有中文字符和非中文字符情况")
if (e % 2) {
console.log("字节数为偶数情况")
// 字节数为偶数情况 // 目的:获取匹配余数ys的实际最后字符数截取文本,为优化效率,从中间截取左右加减,直到 ±k+e/2=ys
let jq2 = v.substring(word_num - (e / 2), word_num)
var e2 = jq2.replace(/[^\x00-\xff]/g, 'xx').length
} else {
// 字节数为奇数情况
console.log("字节数为奇数情况")
let jq2 = v.substring(word_num - (e / 2) - 1, word_num)
var e2 = jq2.replace(/[^\x00-\xff]/g, 'xx').length
}
// 匹配最后字节的字符情况
if (e2 < ys) {
// 中位数值小于目标余数ys值,需要向左做加法
// 计算左边第一个单字符的字节
let jq3 = v.substring(word_num - (e / 2) - 1, word_num - (e / 2))
var k = jq3.replace(/[^\x00-\xff]/g, 'xx').length
// 逐步循环左边单字符并加上其字节数,直到字节数=余数ys,停止循环
for (let i = 1; i < (e / 2) + 1; i++) {
if (k + e2 >= ys) {
var middleWord = v.substring(middle, word_num - (e / 2) - i + 1).split('')
var endWord = v.substring(word_num - (e / 2 + i - 1), word_num)
break
} else {
let jq4 = v.substring(word_num - (e / 2) - i, word_num - (e / 2) - i + 1)
k = k + jq4.replace(/[^\x00-\xff]/g, 'xx').length
}
}
} else if (e2 > ys) {
// 中位数值大于目标余数ys值,需要向右做减法
// 计算右边第一个单字符的字节
let jq3 = v.substring(word_num - (e / 2), word_num - (e / 2) + 1)
var k = jq3.replace(/[^\x00-\xff]/g, 'xx').length
// 逐步循环右边单字符并减去其字节数,直到字节数=余数ys,停止循环
for (let i = 1; i < (e / 2) + 1; i++) {
if (e2 - k >= ys) {
var middleWord = v.substring(middle, word_num - (e / 2) + i + 1).split('')
var endWord = v.substring(word_num - (e / 2) + i + 1, word_num)
break
} else {
let jq4 = v.substring(word_num - (e / 2) + i, word_num - (e / 2) + i + 1)
k = k - jq4.replace(/[^\x00-\xff]/g, 'xx').length
}
}
} else {
var middleWord = v.substring(middle, word_num - (e / 2)).split('')
var endWord = v.substring(word_num - (e / 2), word_num)
}
}
newWord = newWord.concat(middleWord)
newWord.push(endWord)
newText[i] = newWord
} else {
// 字节有多行,且最后一行字节正好满一行,直接拆分成数组
console.log("字节有多行,且最后一行字节正好满一行,直接拆分成数组")
newText[i] = word
}
})
console.log(newText)
return newText
}
不过但是发现写着写着有点鸡肋，就又换了一个思路去写
最终版
1327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
