- 发布：2023-06-04 02:04
- 更新：2023-06-04 02:20
- 阅读：366
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.8.4
手机系统： 全部
手机厂商： 华为
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<template>
<view style="direction: rtl;">
<view style="background-color: #222; direction: rtl;">
<text style="text-align: left;color: #fff;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
<template>
<view style="direction: rtl;">
<view style="background-color: #222; direction: rtl;">
<text style="text-align: left;color: #fff;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>操作步骤：
打包测试即可
打包测试即可
预期结果：
IOS下，text-align: left;生效
IOS下，text-align: left;生效
实际结果：
无效
无效
bug描述：
NVUE下，CSS给子元素direction: rtl;以后，安卓和IOS，文本内容text-align: left;表现不一致。
w***@qq.com (作者) - 80后IT男
更改下实例代码，更清晰。 请运行ios和安卓。
<template>
<view style="direction: rtl;">
<view style="background-color: #999;width:500rpx;">
<text style="text-align: left;color: red;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>