文字反向居中排序（整活思路）

不知道大家有没有遇到过这种需求

写过tab的时候，下面的文字描述是自动换行居中的，然后反着来的显示

不知道大家在处理这种情况的时候都是怎么做的呢
正常自动换行居中的话是这样的

如果是我的话，直接几个p标签怼上去
但是我突发奇想是不是可以整个活，我可以结合翻转来实现这个需求

一、明确需求

实现一个tab，里面展示描述文字 “好麻烦让我文字反着写”，文字反向居中排序，期待效果如下：

二、设计思路

1.结构转换

正常的自动换行和期望的效果在结构上是相似的，都是三七的组合，要么上面七个字下面三个字，要么上面三个字下面七个字
如果我们将正常的自动换行旋转一百八十度，那结构是不是一样了，如下：

2.顺序转换

翻转一百八十度之后结构相同了，但是细心的朋友可以发现我们的顺序不对。

所以我们重新整一下
我们需要在转之前就先将我们的文案顺序逆序
翻转后的内容顺序是：写着反字文我让烦麻好
然后将这段文案按正常的自动换行输出效果如下：

然后操作同上，再翻转一百八十度

我们就得到了一个顺序正常的文字反向居中排序的文案了

3.文字转换

这个其实已经是文字反向居中排序了

但可以看到每个字都旋转了180度，因此我们最后一步就是把每个字再旋转180度
就可以得到反向居中排序的文字了

三、开始实现

1.开始

text："好麻烦让我文字反着写"

<div class="box">
    <div class="tips">
        <p>{{text}}</p>
    </div>
</div>

.box {
    height: 52px;
    width: 100px
    border-radius: 3px;
    padding: 16px 53px 16px 53px;
    background: antiquewhite;
    .tips {
        font-size: 14px;
        width: 100%;
        color: #333;
        text-align: center;
    }
}

效果：

2.结构转换

.box {
    height: 52px;
    width: 100px
    border-radius: 3px;
    padding: 16px 53px 16px 53px;
    background: antiquewhite;
    .tips {
        transform:rotate(180deg); // 旋转180度
        font-size: 14px;
        width: 100%;
        color: #333;
        text-align: center;
    }
}

效果：

3.顺序转换

<div class="box">
    <div class="tips">
        <p>{{reverseText()}}</p>
    </div>
</div>

reverseText() {
    return this.text.split("").reverse().join("") // 文字顺序逆序
}

效果：

4.文字转换

文字转换要将每个字都旋转一百八十度

<div class="box">
    <div class="tips">
        <p>
            <!-- 遍历数组每个内容单独转换180度-->
            <span v-for="(item, index) in reverseText()" :key="index">{{ item }}</span>
        </p>
    </div>
</div>

reverseText() {
    return this.text.split("").reverse() // 文字顺序逆序, 转成数组，每个字都旋转180度
}

.box {
    height: 52px;
    width: 100px
    border-radius: 3px;
    padding: 16px 53px 16px 53px;
    background: antiquewhite;
    .tips {
        transform:rotate(180deg); // 旋转180度
        font-size: 14px;
        width: 100%;
        color: #333;
        text-align: center;
        span {
                display: inline-block;
                transform: rotate(180deg);// 旋转180度
            }
    }
}

效果：

总结

实现方法是：
1.先文字逆序成一个数组
2.文字容器旋转一百八十度
3.遍历逆序文字数组，每一个再旋转一百八十度
这样就可以得到一个逆序反向居中排序的文字了

到这里这个文字反向居中排序就完成了，说到底是个整活文章，一般项目中也不会这么搞。
这里提供个有意思的思路，谢谢各位观众大佬的观看！

整个活儿，文字反向居中排序