uni-app ios 连续标点符号在text标签下不换行问题

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app ios 连续标点符号在text标签下不换行问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.26

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：iphone 11

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

<template>  
    <view style="white-space: pre-wrap;width: 200rpx;" >       
        <text style="background-color: #292A3A;color: #fff;word-break: break-all;">****************************************************************************************</text>  
    </view>  
</template>  

<script>  
    //此页面用来配置加载项目前的配置  
    export default {  
        data() {  
            return {  

            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style lang="scss">  

</style>  
`

Harmonyos Next教程
5 回复

请官方重视这个问题，该问题已经严重影响了用户体验


@DCloud_HB_WJ @DCloud移动团队 @DCloud_iOS_ZFL @DCloud_iOS_WZT

请查看@DCloud_HB_WJ

换种写法看看，是这样吧？
<template>
<view class="box" style="width: 200rpx;background-color: red;">
<text style="background-color: #292A3A;color: #fff;">****************************************************************************************</text>
</view>
</template>

<script> //此页面用来配置加载项目前的配置 export default { data() { return { } }, onLoad() { }, methods: { } } </script> <style lang="scss"> .box { word-wrap: break-word; /* 旧版属性，兼容性更好 */ overflow-wrap: break-word; /* 新版属性 */ } </style>

在 uni-app 中处理 text 标签下的连续标点符号不换行问题，特别是在 iOS 平台上，通常涉及到文本渲染和换行规则的处理。iOS 和 Android 在处理文本换行时可能存在细微差异，尤其是在处理连续标点符号时。下面提供一个通过自定义组件和 CSS 样式来解决这个问题的示例代码。

解决方案：使用 rich-text 组件和自定义样式

uni-app 提供了 rich-text 组件，它允许更灵活的文本渲染控制。我们可以利用这个组件结合 CSS 样式来处理换行问题。

1. 准备 HTML 内容

首先，准备包含连续标点符号的 HTML 内容。这里我们将标点符号之间插入 <br/> 标签作为换行处理的一个变通方法（虽然不完美，但在某些情况下可能有效）。

<template>
  <view>
    <rich-text :nodes="formattedText"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rawText: '这是测试文本！！！！！！这是另一段测试文本。。。。。。'
    };
  },
  computed: {
    formattedText() {
      // 简单处理：在每个连续三个以上标点符号后插入换行
      return this.rawText.replace(/([！！？？！…。]){3,}/g, '$1<br/>');
    }
  }
};
</script>

2. 自定义 CSS 样式（可选）

虽然 CSS 不能直接解决换行问题，但可以用来调整文本样式以适应换行后的布局。

<style scoped>
rich-text {
  white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
  word-wrap: break-word; /* 长单词或 URL 地址内部进行换行 */
}
</style>

注意

  • 上述方法是一个简单的示例，它基于正则表达式在连续三个或更多标点符号后插入换行。这种方法有其局限性，比如无法处理所有可能的标点符号组合和换行需求。
  • 对于更复杂的换行需求，可能需要更复杂的文本处理逻辑，甚至考虑使用第三方库来处理文本换行。
  • 如果 uni-app 或相关平台提供了更底层的文本渲染控制（如自定义渲染器），也可以考虑利用这些特性来实现更精确的换行控制。

在实际应用中，根据具体需求和平台差异，可能需要调整上述代码以适应不同场景。

回到顶部