解决MessageTextInput只读之后，不自动换行的问题

CSSStyle customCss = new CSSStyle();

      customCss.setProperty("width","320px");

      customCss.setProperty("word-break","break-all");

      customCss.setProperty("word-wrap","break-word");

      customCss.setProperty("white-space","pre-wrap");

      customCss.setProperty("overflow","auto");

      customCss.setProperty("float","float");

      OAMessageTextInputBean BuyerInternalNotesBean = (OAMessageTextInputBean)webBean.findChildRecursive("BuyerInternalNotes");

      if(BuyerInternalNotesBean!=null){

          BuyerInternalNotesBean.setInlineStyle(customCss);

      }

今天遇到一个需求，客户注册页面客户化了一个超级长的注册须知，内容很多。但是样式相对又要做起来好看点。

注册须知的内容使用多个message拼接而成。

老大说rawText支持html样式，于是我想到了三种解决方案：

1.在messageCompaonentLayout里面放messageTextInput,再将其disabled掉，messageCompaonentLayout设置宽度为80%。

2.在messageCompaonentLayout里面放messageStyledText，messageCompaonentLayout设置宽度为80%。

3.使用rawText，包含html代码，在测试的时候对html不熟，直接用了<p>段落标签(这个可以不使用message,在页面直接写死)。

然后，出来的效果图如下，

看起来是不是要抓狂的感觉。

我先说一下他们分别出了什么问题。

　　1.第一种方案，他完美的保留了我在message里面定义的换行，前置顶格，但是他不能自动换行，在message里面如果有一行超级长的说明，那么在网页中显示就会是一个单行，巨丑陋。

　　2.第二种方案，他成功的实现了宽度占页面80%，但是同时有另外一个问题，那就是所有的换行，前置顶格等格式没有了，变成了一坨。

　　3.第三种方案，由于我对html不熟，所以在刚实现的时候所写即所得，但是我并没有失望，因为他起码证明了使用rawText是可行的。

　　

　　我测试了很久，发现第一种和第二种方案并不能有所改善，于是果断放弃。开始尝试纯html的方式。

　　

　　经过仔细的看源码，发现，方案一在源码里面使用的是pre标签，方案二使用的是span标签，方案三就是我写的html。

　　

　　由于我并不想直接使用<p>和<br>这种手动的方式去换行，一是因为懒，二是觉得这种方式太原始，三是考虑到可能出现屏幕分辨率的一些问题。

　　所以直接采用了pre标签。(经测试，发现其实跟标签类型无关，主要是样式正确即可，当然，pre标签有个最大的好处就是原样输出，不用在乎内容中有特殊的和html等价的表达式),最终样式如下。

　　实现的过程是漫长而痛苦的，出现了好多次不同浏览器兼容性的问题，最终代码如下。

　　chrome的兼容性最好。firefox对overflow的支持并不友好，据说是因为这不是一个w3c标准。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><body>

<pre  class="x5" style="width:1200px; word-break: break-all; white-space:pre-wrap;  word-wrap: break-word; overflow:auto; float:left ; background-color:#901128"  >

        注册须知

    帝高阳之苗裔兮

    顶格，顶格，顶格

这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!</pre>

<span  class="x5" style="width:1200px; word-break: break-all; white-space:pre-wrap;  word-wrap: break-word; overflow:auto; float:left ; background-color:#901128"  >

        注册须知

    帝高阳之苗裔兮

    顶格，顶格，顶格

这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!</span>

<p  class="x5" style="width:1200px; word-break: break-all; white-space:pre-wrap;  word-wrap: break-word; overflow:auto; float:left ; background-color:#901128"  >

        注册须知

    帝高阳之苗裔兮

    顶格，顶格，顶格

这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!这是一个超级长文本，我要对他实现自动换行！自动换行！动换行！换行！行！昂！NG!G!!</p>

</body></html>

　　其实我并不能理解为什么这些属性的组合可以实现我想要的功能，尤其是white-spece处理了firefox不兼容overflow的问题。

　　在亲自测试的过程中，发现了很多很有意思的问题，各位若有兴趣，可以一次省略掉其中的某些属性，然后在不同的浏览器上进行测试，相信会发现很多彩蛋。

<p class="x5" style=" word-break: break-all; word-wrap: break-word; white-space:pre-wrap; background-color:#CEE3F7; color:red ;"> aaa这是一段非英文的长文本协议; 这是一段非英文的长文本协议 ;这是一段非英文的长文本协议; 这是一段非英文的长文本协议;这是一段非英文的长文本协议;;这是一段非英文的长文本协议;这是一段非英文的长文本协议;这是一段非英文的长文本协议;这是一段非英文的长文本协议; </p>

最新更新

在孜孜不倦的努力下，解决了messageStyledText自动换行，以及messageTextInput只读之后自动换行， 且不把IE浏览器撑开的实现方式。

      CSSStyle customCss = new CSSStyle();

      customCss.setProperty("width","320px");

      customCss.setProperty("word-break","break-all");

      customCss.setProperty("word-wrap","break-word");

      customCss.setProperty("white-space","pre-wrap");

      customCss.setProperty("overflow","auto");

      customCss.setProperty("float","float");

      OAMessageTextInputBean BuyerInternalNotesBean = (OAMessageTextInputBean)webBean.findChildRecursive("BuyerInternalNotes");

      if(BuyerInternalNotesBean!=null){

          BuyerInternalNotesBean.setInlineStyle(customCss);

      }

经测试，不加overflow和float属性，会导致一个问题，在IE浏览器下，messageTextInput所在region的最大宽度会被messageTextInput中的文字的最大长度所撑开。

所以，messageTextInput的内容虽然换行了，但是页面还是存在一个大的问题，整体宽度被撑开，其他栏位需要在页面地步的横向滚动条 滚动之后才能查看。

OAF 中对文字实现html效果及对超级长文本实现默认换行，对只读的messageTextInput中的内容自动换行的更多相关文章

  1. C++中结构体与类的区别（结构不能被继承，默认是public，在堆栈中创建，是值类型，而类是引用类型）good

    结构是一种用关键字struct声明的自定义数据类型.与类相似,也可以包含构造函数,常数,字段,方法,属性,索引器,运算符和嵌套类型等,不过,结构是值类型. 1.结构的构造函数和类的构造函数不同. a. ...

  2. Android - 文字向上翻滚效果的实现

    本文转载https://xwc2013.iteye.com/blog/1976051 今天看到了一种文字翻滚的效果,感觉非常实用.所以就自己试着做出了这种效果,现在把它分享给大家! 首先在res目录下 ...

  3. 在uniapp或者vue中单行文字或者符号无法换行的终极解决方案

    在VUE开发过程中,会出现比较诡异的情况. 比如常规的英文或中文显示都是很正常的,但是当出现了一些中文符号(比如,!等等)在文末的时候,总是会超出view的显示区域. 那么在遇到上面这种问题我们记得检 ...

  4. JavaScript设置div中的文字滚动起来 实现滚动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css3 文字轮番滚动效果2——改进版

    1.优化了之前的代码: 2.修正了先前按照文字的条目的数量计算速度的问题,现在改为按照字符的个数计算动画执行一次需要的时间,更为精确: 3.增添了每一行JS代码的注释. 4.这个案例的用途一般为告警信 ...

  6. VC中实现文字竖排的简单方法

    好多人都觉得在VC中实现文字竖排是一件很难的事情,其实可以使用“躺”着的字体很方便的实现文字竖排. Windows中有一些字体是“躺”着的,例如:@Fixedsys.@System.@宋体.@黑体等等 ...

  7. Zybo智能小车识别图像中的文字

    智能小车识别图像中的文字 [TOC] 运行平台 这次的内容是基于Xilinx公司的Zybo开发板以及其配套的Zrobot套件开发 Zybo上面的sd卡搭载了Ubuntu12.04LTS的linux版本 ...

  8. Js制作点击输入框时默认文字消失的效果

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...

  9. OpenGL------在Windows系统中显示文字

    增加了两个文件,showline.c, showtext.c.分别为第二个和第三个示例程序的main函数相关部分.在ctbuf.h和textarea.h最开头部分增加了一句#include <s ...

随机推荐

  1. JAVA-使用commos-fileupload实现文件上传与下载

    一文件的上传 实体类 在CODE上查看代码片派生到我的代码片 import java.sql.Timestamp; /** * * @Decription 文件上传实体类 * @author 刘楠 * ...

  2. Spring(十)Spring任务调度

    一.计划任务 需要定时执行一些计划(定时更新等),这样的计划称之为计划任务 Spring抽象封装了Java提供的Timer与TimerTask类 也可以使用拥有更多任务计划功能的Quartz 二.Ti ...

  3. 记录JVM垃圾回收算法

    垃圾回收算法可以分为三类,都基于标记-清除(复制)算法: Serial算法(单线程) 并行算法 并发算法 JVM会根据机器的硬件配置对每个内存代选择适合的回收算法,比如,如果机器多于1个核,会对年轻代 ...

  4. [AapacheBench工具]web性能压力测试工具的应用与实践

    背景:网站性能压力测试是性能调优过程中必不可少的一环.服务器负载太大而影响程序效率是很常见的事情,一个网站到底能够承受多大的用户访问量经常是我们最关心的问题.因此,只有让服务器处在高压情况下才能真正体 ...

  5. ajax回调中的this.href不执行跳转的解决办法

    1. 问题背景 如下所示代码: $.post("/ems/register",indata, function(data){ if(data != null && ...

  6. Nginx的安装与使用

    在 CentOS 7 系统上: $ sudo rpm --import http://nginx.org/keys/nginx_signing.key $ sudo rpm -ivh http://n ...

  7. Java NIO入门

    NIO入门 前段时间在公司里处理一些大的数据,并对其进行分词.提取关键字等.虽说任务基本完成了(效果也不是特别好),对于Java还没入门的我来说前前后后花了2周的时间,我自己也是醉了.当然也有涉及到机 ...

  8. myeclipse关闭html,jsp等页面的可视化编辑器

    myeclipse打开html,jsp等页面时,有的是默认用可视化编辑器打开的,这样打开会显得很慢,只要关闭可视化编辑器就会快很多了,方法如下: 1,选择菜单: windows -> prefe ...

  9. DirectX API 编程起步 #02 窗口的诞生

    在这篇文章里我们先用 windows API 制作一个窗口出来,以后再用 DirectX API 渲染的东西就会显示在这里,控制台那黑白的画面肯定是没法用的. 每次的代码都会更新到Github 首先贴 ...

  10. ArcGis 10+Oracle发布WFS-T服务，无法更新Feature的解决方法

    现象: 前端采用Openlayers,更新Feature时服务器端返回的XML提示更新错误 原因: 参考:http://support.esri.com/en/knowledgebase/techar ...