vue框架通用化解决个性化文字换行问题实例详解

目录
  • 通用化解决个性化文字换行问题
    • 背景
  • 通用化的办法解决
    • 第一步：在内容平台上的单行input改成多行input（textarea）
    • 第二步：所有文本处统一用v-text （vue）
    • 第三步：所有文本处统一增加一个样式 white-space: pre-wrap
  • 总结

通用化解决个性化文字换行问题

背景

首先我们网站内容是运营自己在内容平台上去配置的，我们开发不用参与和release代码。并且是国际化，多语言的。

在这种背景下，经常碰到某种语言下，某些文字需要能够增加换行的能力。

例如：

原本是正常的文本流

This example creates a new intersection observer which calls the function

某些语言下，需要强制在某些点上换行

В этом примере создается новый наблюдатель пересечения
который вызывает функцию

因为这个问题，很容易经常被pm打扰，这种需要改代码和发布上线的，虽然改代码很容易，但后续的自测和发布上线还是很麻烦的，所以准备用一个通用的办法来解决

背景是vue框架

通用化的办法解决

首先是不能用v-html来解决，这个很不安全，因为内容是别人在内容平台上去配置的。

总结一下通用化的改造办法，3步

  • 在内容平台上的单行input改成多行input（textarea）
  • 所有文本处统一用v-text
  • 所有文本处统一增加一个样式 white-space: pre-wrap

解释一下这3步

第一步：在内容平台上的单行input改成多行input（textarea）

作用

多行input（textarea） 增加换行能力，运营可以随心所欲 在想要的地方加上换行

第二步：所有文本处统一用v-text （vue）

作用

  • 消除 编辑器或格式化 的一些不必要的前后换行符和空格，例如：
这种写法 会有一些不必要的前后换行符和空格
<div class="text-20 leading-[140%] text-center md:mb-[30px]">
  {{ paginationInfo }}
</div>
推荐用v-text消除这个差异
<div v-text="paginationInfo" />

第三步：所有文本处统一增加一个样式 white-space: pre-wrap

作用：让文本内的换行符可以生效

例如：

white-space: pre-wrap 可以统一包成一个classname，加到用了v-text的文本上去

更详细的了解white-space可以参考 developer.mozilla.org/zh-CN/docs/…

  • 有兴趣的朋友可以研究一下，为什么用 pre-wrap，而不是其他的

总结

如果我们的网站内容是 运营自己去内容平台（CMS平台）上去配置的，那么我们最好把所有有文字的地方，都提前这样设计好，为以后的维护减少麻烦

另外插一嘴，网站内容是 运营自己去内容平台（CMS平台）上去配置的 有什么好处？

好处非常大，对需要做SEO，或经常变更内容的网站来说，这样做可以极大的减少开发工作。并且更重要的是可以快速响应，比如你的运营是美国pm，我们和美国有12小时时差，工作时间基本错开了，还有沟通成本

以上就是通用化解决个性化文字换行问题实例详解的详细内容，更多关于通用个性化文字换行的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 解决vue字符串换行问题(绝对管用)

    vue 中 用 {{}} 进行数据绑定的时候,如果我么你想让字符串换行是不生效的 解决办法,不用上边的方式进行数据绑定,用v-html标签代替{{}} data中的str为 "<b>1111</b><br/>2222" 例1, <div>{{str}}<div> 例1效果 <i>1111</i><br/>2222 例2, <div v-html="str">&

  • Vue编程格式化代码属性自动换行问题

    Vue编程格式化代码属性自动换行问题

    目录 前言 直入主题 具体操作 原理 1.关于vetur.format.defaultFormatter.html 2. 关于vetur.format.defaultFormatterOptions 参考来源 https://www.jb51.net/article/182913.htm https://www.jb51.net/article/161243.htm 前言 最近写Vue代码,发现template里的html代码,会因为标签内的属性稍有超出就出现换行,看着挺难受的,毕竟屏幕还挺宽敞

  • 关于vue中element-ui form或table lable换行的问题

    关于vue中element-ui form或table lable换行的问题

    element-ui form或table lable换行问题 今天在写项目,突然遇到个需求,需要将form里面的lable换行,百度了下,发现了一个办法,特此记录下来 First,我们先要在我们的lable里面进行以下操作 :label="'机组: \n(xxx用)'" 双引号嵌套单引号 在需要换行的文字中间 加入\n 换行符 Second,再添加css的样式 /deep/ .el-form-item__label{ white-space:pre-line; } //如果是tabl

  • 解决Vue大括号字符换行踩的坑

    解决Vue大括号字符换行踩的坑

    最近遇到这样一个问题,在页面上要显示一段自定义的文本,文本如果较长的话需要换行显示. 在HTML中可以通过<br/>标签换行,也可以通过\n转义字符换行 在Vue中用大括号显示的变量,加<br/>会直接被当成字符串显示出来,加\n显示一个空格,加\r\n显示两个空格,因为{{}}}是文本插值,内部都会按照普通字符串进行处理,可以用v-html进行显示 如下显示name变量 data() { return{ name: '前一部分<br/>后一部分' } } 在元素上显示

  • Vue 解决在element中使用$notify在提示信息中换行问题

    在项目开发过程中,遇到如下用户体验提升需求:需要实现错误提示时根据后台返回错误列表信息,换行展示. 实现方式如下: 通过F12元素查看,在对应的样式中加入white-space:pre-wrap,该样式的主要作用是识别字符串中的换行符"\n",故需要在待展示的信息字符串中加入相应的换行标识符. 在$notify消息提示中,作用于el-notification: .el-notification {white-space:pre-wrap !important; } 有的童鞋可能试过样式

  • 详解vue保存自动格式化换行

    网上找了好多方法改着也没用,后面从一个大佬上看到的,就摘下来了,字体的话还是原来系统自带的看着舒服,就自己添加上去了,需要改动的可自行修改,在右上角文件--首选项--设置--搜索setting---在setting.json编辑,把其他的注释掉,换上下面的代码块就可以了,字体大小和行高可自行修改 { //设置文字大小 "editor.fontSize": 18, //设置文字行高 "editor.lineHeight": 20, //开启行数提示 "edi

  • vue框架通用化解决个性化文字换行问题实例详解

    vue框架通用化解决个性化文字换行问题实例详解

    目录 通用化解决个性化文字换行问题 背景 通用化的办法解决 第一步:在内容平台上的单行input改成多行input(textarea) 第二步:所有文本处统一用v-text (vue) 第三步:所有文本处统一增加一个样式 white-space: pre-wrap 总结 通用化解决个性化文字换行问题 背景 首先我们网站内容是运营自己在内容平台上去配置的,我们开发不用参与和release代码.并且是国际化,多语言的. 在这种背景下,经常碰到某种语言下,某些文字需要能够增加换行的能力. 例如: 原本

  • Spring AOP切面解决数据库读写分离实例详解

    Spring AOP切面解决数据库读写分离实例详解

    Spring AOP切面解决数据库读写分离实例详解 为了减轻数据库的压力,一般会使用数据库主从(master/slave)的方式,但是这种方式会给应用程序带来一定的麻烦,比如说,应用程序如何做到把数据写到master库,而读取数据的时候,从slave库读取.如果应用程序判断失误,把数据写入到slave库,会给系统造成致命的打击. 解决读写分离的方案很多,常用的有SQL解析.动态设置数据源.SQL解析主要是通过分析sql语句是insert/select/update/delete中的哪一种,从而对

  • web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个

  • Vue指令之 v-cloak、v-text、v-html实例详解

    v-cloak 当用户频繁刷新页面或网速慢时,页面未完成 Vue.js 的加载时,导致 Vue 来不及渲染,这就会导致在浏览器中直接暴露插值(表达式),Vue由此也给出了解决方法. 在指定标签或整个父容器加入v-cloak指令,通过css选择器选中v-cloak,隐藏元素即可. // html <div v-cloak id="app"> <span>{{ msg }}</span> </div> // css [v-cloak]{ di

  • 对vue中的事件穿透与禁止穿透实例详解

    在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是,直接在事件的方法中添加event.stopPropagation() //html <button>关闭</button> //

  • 基于Vue实现可以拖拽的树形表格实例详解

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插件已打包封装好,发布到npm上 本博文会分为两部分,第一部分为使用方式,第二部分为实现方式 安装方式 npm i drag-tree-table --save-dev 使用方式 import dragTreeTable from 'drag-tree-table'  模版写法 <dragTreeTa

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • TinyMCE汉化及本地上传图片功能实例详解

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单. 首先去网上随便下载个汉化包,然后把汉化包解压后的langs文件夹里的zh_CN.js拷到你下载的TinyMCE的langs文件夹中就行.最后在 tinymce.init中加上"language: "zh_CN","(后面会贴出代码) 本地图片上传我用到了Jquery中的uploadify和UI,所以需要引用jquery.

  • Vue的事件响应式进度条组件实例详解

    写在前面 找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 效果图 以

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

随机推荐