Home > Developer > Web Develop
Today met a demand, customer registration page customized a super long registration notice, a lot of content. But the style is relatively nice to do.
The content of the registration notice is made using multiple message stitching.
Boss said Rawtext support HTML style, so I think of three solutions:
1. Put the messagetextinput inside the messagecompaonentlayout, and then disabled it out, Messagecompaonentlayout set the width to 80%.
2. Put Messagestyledtext,messagecompaonentlayout in Messagecompaonentlayout and set width to 80%.
3. Use Rawtext, including HTML code, in the test when the HTML is not familiar, directly using the <p> paragraph tag (this can not use a message, the page directly write dead).
And then, come out the following,
It looks like it's going to freak out.
Let me tell you something about their respective problems.
1. The first option, he perfectly preserved the line I defined in the message, the front top, but he can not wrap, in the message if there is a line of super long instructions, then the page will be displayed in a single line, huge ugly.
2. The second option, he succeeded in achieving the width of page 80%, but at the same time there is another problem, that is, all the line, the former top grid and other formats have not, become a lump.
3. The third option, since I am not familiar with HTML, is what I wrote when I realized it, but I am not disappointed because he has at least proved that it is possible to use Rawtext.
I have been testing for a long time and found that the first and second solutions did not improve, so I decided to give up. The way to start trying plain html.
After careful look at the source code, found that the program is used in the source code is the pre tag, the plan two uses the span tag, plan three is I write HTML.
Because I do not want to use <p> and <br> this manual way to change the line, one is because of laziness, the second is that this way is too primitive, three is to consider the possible screen resolution of some problems.
So the pre tag is used directly. (after testing, found in fact, not related to the label type, mainly style is correct, of course, the pre tag has the biggest advantage is the original output, do not care about the content has special and HTML equivalent expression), the final style is as follows.
The implementation of the process is long and painful, there have been several different browser compatibility issues, the final code is as follows.
Chrome has the best compatibility. Firefox's support for overflow is not friendly, it is said, because it is not a standard.
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"><HTML><Body><Preclass= "x5"style= "width:1200px; word-break:break-all; white-space:pre-wrap; Word-wrap:break-word; Overflow:auto; Float:left; Background-color: #901128 " >Registration Notice Seed XI Shelf, shelf, shelf this is a super long text, I want to implement the automatic line! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! G!! This is a super long text and I'm going to implement automatic wrapping on him! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! G!! This is a super long text and I'm going to implement automatic wrapping on him! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! G!! This is a super long text and I'm going to implement automatic wrapping on him! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! g!!</Pre><spanclass= "x5"style= "width:1200px; word-break:break-all; white-space:pre-wrap; Word-wrap:break-word; Overflow:auto; Float:left; Background-color: #901128 " >Registration Notice Seed XI Shelf, shelf, shelf this is a super long text, I want to implement the automatic line! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! G!! This is a super long text and I'm going to implement automatic wrapping on him! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! G!! This is a super long text and I'm going to implement automatic wrapping on him! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! G!! This is a super long text and I'm going to implement automatic wrapping on him! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! g!!</span><Pclass= "x5"style= "width:1200px; word-break:break-all; white-space:pre-wrap; Word-wrap:break-word; Overflow:auto; Float:left; Background-color: #901128 " >Registration Notice Seed XI Shelf, shelf, shelf this is a super long text, I want to implement the automatic line! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! G!! This is a super long text and I'm going to implement automatic wrapping on him! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! G!! This is a super long text and I'm going to implement automatic wrapping on him! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! G!! This is a super long text and I'm going to implement automatic wrapping on him! Wrap the line! Stayput Line! Wrap it Up! Yes! Ngong! ng! g!!</P></Body></HTML>
In fact, I don't understand why the combination of these attributes can achieve the function I want, especially white-spece to deal with the problem of incompatible Firefox overflow.
In the process of personal testing, found a lot of interesting questions, if you are interested, you can omit some of these properties at once, and then test on different browsers, I believe you will find very colorful eggs.
HTML effect for text in OAF and default line wrapping for super long text
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
