Tip: You can modify some of the code before running
<style type= "Text/css" > hr {clear:both}. detail {display:none;}. box {overflow:hidden;zoom:1;} h3:hover { Background-color: #CBCBCB; cursor:pointer;} . word_break:after {clear:both;display:block;content: "."; height:0;visibility:hidden;font-size:0;line-height:0;} . word_break {float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun;border:1px solid # 242424;zoom:1;} </style> <div class= "box" onmouseover= "document.getElementById (' D1 '). style.display= ' None '; document.getElementById (' D2 '). style.display= ' None '; > <div class= "word_break" > Text, here is the text, want more text, then start copying ... Text AH text, here is actually text, want more text, then start copying ... Text AH text, here is actually text, want more text, then start copying ... What would be the effect if the text here was so long and without punctuation marks? End! </div> <div class= "word_break" >test text txt word copy now! Test Texttexttexttexttext txt Word copy now! Test text txt word copy now! Test text txt word copy now! Test text txt word copy now! Test text txt word copy now! Test text txt word copy now! </div> <div class= "Word_break" > Assssssssssssssssssssssssssssssssssssssssss333333333412341234adsfadfzxcvzcvdfgfnasdfadzvasdf234234adfvczxcvasdfasdf234adf zszxcvasdfasdf234234234azcvasdfadfasdf234adfasdf</div> <div id= "Show_code" ></div> </div> <pr/> <p onclick= "document.getElementById" (' D1 '). style.display= ' block ';d Ocument.getelementbyid (' D2 '). Style.display= ' None '; "title=" Click to view word-break detailed instructions, from the CSS Manual (Su Ying Edition) ">word-break:</p> <div class=" id= "D1" > <ul> <li><strong>normal</strong>: Default value. Allow word wrapping </li> <li><strong>break-all</strong>: This behavior is <strong>normal</strong with Asian language > The same. Also allows any word in a non-Asian text line to be disconnected. This value is appropriate for Asian texts containing non-Asian text </li> <li><strong>keep-all</strong>: <strong>normal< with all non-Asian languages /strong> the same. For Chinese, Korean, Japanese, word is not allowed to break. Non-Asian text with small amounts of Asian text </li> </ul> <dl> <dt> description:</dt> <dd> <p> setting or retrieving text within an object in Word wrap line For. Especially when it comes to multiple languages. ,;/p> <p> for Chinese, <strong>break-all</strong> should be used. </p> </dd> </dl> </div> <input type= "button" value= "Word-break:normal" id= "wb_1"/> < Input type= "button" value= "Word-break:break-all" id= "wb_2"/> <input type= "button" value= "Word-break:keep-all;" Id= "Wb_3"/> <p onclick= "document.getElementById" (' D1 '). style.display= ' None ';d ocument.getelementbyid (' D2 '). Style.display= ' block ', "title=" Click to view word-wrap detailed instructions, from the CSS Manual (Su Ying Edition) ">word-wrap:</p> <div class=" Id= "D2" > <ul> <li><strong>normal</strong>: <strong> default value </strong>. Allow content to top open specified container boundaries </li> <li><strong>break-word</strong>: Content wraps within boundaries. If necessary, word wrap (<strong>word-break</strong>) will also occur </li> </ul> <dl> <dt> Description:</dt> <dd> <p> Sets or retrieves whether a career change is broken when the current row exceeds the bounds of the specified container. </p> <p> This property is used only for objects with layouts, such as block objects. Inline elements to use this property, you must first set the object's <strong>height</sTrong> or <strong>width</strong> properties, or set <strong>position</strong> property to <strong> Absolute</strong>, or set <strong>display</strong> property to <strong>block</strong>. </p> </dd> </dl> </div> <input type= "button" value= "Word-wrap:normal" id= "Ww_1"/> <i Nput type= "button" value= "Word-wrap:break-word;" id= "ww_2"/> <pr/> <button type= "button" id= "Clear_all" > Clear Break style </button> <script type= "Text/javascript" > window.onload = function () {var c_all = Document.getel Ementbyid ("Clear_all"); var s_1; var s_2; var ww_1 = document.getElementById ("Ww_1"); var ww_2 = document.getElementById ("ww_2"); var wb_1 = document.getElementById ("wb_1"); var wb_2 = document.getElementById ("wb_2"); var wb_3 = document.getElementById ("Wb_3"); var sc = document.getElementById ("Show_code"); var S_1_c; var S_2_c; Empty break Style C_all.onclick = function () {s_1 = ""; S_2 = ""; S_1_c = ""; S_2_c = ""; wb_1.disabled = ""; wb_2.disabled = ""; wb_3.disabled = ""; ww_1.disabled = ""; ww_2.disabled = ""; sc.innerhtml = ". word_break {Float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun; border:1px solid #242424 zoom:1;<br/><span > "+ s_1_c +" </span><br/><span > "+ S_2_c +" </SPAN><BR/>} "; } Wb_1.onclick = function () {wb_1.disabled = "disabled"; wb_2.disabled = ""; wb_3.disabled = ""; S_1_c = "word-break:normal;"; S_1 = "<style type= ' text/css ' >.word_break {word-break:normal;} </style> "; if (s_2_c==undefined) {s_2_c = ""; } if (s_2==undefined) {s_2 = ""; } sc.innerhtml = ". word_break {Float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun; border:1px solid #242424 zoom:1;<br/><span > "+ s_1_c +" </span><br/><span > "+ S_2_c +" </SPAN><BR/>} "+ S_1 + s_2; } Wb_2.onclick = FunctIon () {wb_1.disabled = ""; wb_2.disabled = "Disabled"; wb_3.disabled = ""; S_1_c = "word-break:break-all;"; S_1 = "<style type= ' text/css ' >.word_break {word-break:break-all;} </style> "; if (s_2_c==undefined) {s_2_c = ""; } if (s_2==undefined) {s_2 = ""; } sc.innerhtml = ". word_break {Float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun; border:1px solid #242424 zoom:1;<br/><span > "+ s_1_c +" </span><br/><span > "+ S_2_c +" </SPAN><BR/>} "+ S_1 + s_2; } Wb_3.onclick = function () {wb_1.disabled = ""; wb_2.disabled = ""; wb_3.disabled = "Disabled"; S_1_c = "word-break:keep-all;"; S_1 = "<style type= ' text/css ' >.word_break {word-break:keep-all;} </style> "; if (s_2_c==undefined) {s_2_c = ""; } if (s_2==undefined) {s_2 = ""; } sc.innerhtml = ". word_break {Float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun; Border: 1px solid #242424 zoom:1;<br/><span > "+ s_1_c +" </span><br/><span > "+ s_2_c +" </s PAN><BR/>} "+ S_1 + s_2; } Ww_1.onclick = function () {ww_1.disabled = "disabled"; ww_2.disabled = ""; S_2_c = "word-wrap:normal;"; s_2 = "<style type= ' text/css ' >.word_break {word-wrap:normal;} </style> "; if (s_1_c==undefined) {s_1_c = ""; } if (s_1==undefined) {s_1 = ""; } sc.innerhtml = ". word_break {Float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun; border:1px solid #242424 zoom:1;<br/><span > "+ s_1_c +" </span><br/><span > "+ S_2_c +" </SPAN><BR/>} "+ S_1 + s_2; } Ww_2.onclick = function () {ww_1.disabled = ""; ww_2.disabled = "Disabled"; S_2_c = "Word-wrap:break-word;"; s_2 = "<style type= ' text/css ' >.word_break {word-wrap:break-word;} </style> "; if (s_1_c==undefined) {s_1_c = ""; } if (s_1==undefined) {s_1 = ""; } sc.innerhtml = ". word_break {Float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun; border:1px solid #242424 zoom:1;<br/><span > "+ s_1_c +" </span><br/><span > "+ S_2_c +" </SPAN><BR/>} "+ S_1 + s_2; }} </script> </td> </tr> </table>
Tip: You can modify some of the code before running
