In the work I encountered a problem, in fact, the function is not complex, that is, there is a textatea tag, the input content, below a display effect, there is a condition is the above input of what format (such as line change and so on), the following shows what format. Such as:
This feature is really not complicated. The implementation is as follows:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Demo</title>6<style>7 . reset{8width:300px; margin:20px Auto 0; border:1px solid #00b3ee; height:auto;9 Display:block;Ten } One A</style> - -<body> the<textarea class= "reset" id= "Inputtext" rows= "5" ></textarea> -<pre id= "demoshow" class= "reset" > -</pre> -<script> +(function(content) { - varOinputtext=content.getelementbyid (' Inputtext '), +Odemoshow=content.getelementbyid (' Demoshow '); Aoinputtext.onkeyup=function(){ atOdemoshow.innerhtml=Oinputtext.value; - } - }) (document) -</script> -</body> -But the problem is when I follow the following:
Beyond the content, I have no hesitation to add:
1 #demoShow {word-wrap: break-word; word-break: break-all;}
The result, the amount, did not respond;
What the hell, Oh, I forgot white-space, and see what he has to value:
By the Pre-wrap or Pre-line, what's the difference between the two of them?
Pre-wrap is the reserved whitespace sequence, plain English is how many spaces to show how many spaces;
Pre-line is a sequence of combined whitespace characters, plain English is that no matter how many spaces only display a space and for the first word before the space is not displayed;
So our goal is to keep the user input format, it should use pre-wrap;
Look at the effect:
That's great, it worked, but what's going on? Such as:
Why is the word broken, which is absolutely not allowed in the product, what should I do? I break-all many times to meditate ...; Suddenly I had a flash of light, and there was keep-all! My God, look what they mean by the difference:
Oops is Keep-all, is keep-all, see the effect is as follows:
Good, it's beautiful, the complete code is as follows:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Demo</title>6<style>7 . reset{8width:300px; margin:20px Auto 0; border:1px solid #00b3ee; height:auto;9 Display:block;Ten } One#demoShow {word-wrap: Break-word; word- Break: Keep-all; white-space:pre-Wrap;} A</style> - -<body> the<textarea class= "reset" id= "Inputtext" rows= "5" ></textarea> -<pre id= "demoshow" class= "reset" > -</pre> -<script> +(function(content) { - varOinputtext=content.getelementbyid (' Inputtext '), +Odemoshow=content.getelementbyid (' Demoshow '); Aoinputtext.onkeyup=function(){ atOdemoshow.innerhtml=Oinputtext.value; - } - }) (document) -</script> -</body> -Summarize:
Said so much, in fact I want to say is: Word-wrap, Word-break and White-space Three is mutual assistance, together to accomplish a goal. which
Word-wrap is to determine if the line is wrapped,
Word-break is to determine whether the line break is violent line, or encounter a space gentle line;
White-space is to determine what to do with the space, the way the swap line allowed;
Thank you for criticizing me!
Word-wrap, Word-break and White-space.
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
