微信扫一扫打赏支持

css3-11 如何让html中的不规则单词折行

css3-11 如何让html中的不规则单词折行

一、总结

一句话总结：用word-wrap属性：word-wrap:break-word;

 

1、word-break和word-wrap的区别？

推荐word-wrap，

word-break：所有单词只要范围不够一律折行

word-wrap：不规则单词折行，规则单词不折行

不好记得话看各自的属性值就知道了

15             /*word-break:break-all;*/
16             word-wrap:break-word;

 

2、word-break和word-wrap的属性值分别是什么？

break-all   和 break-word   其实属性值和功能是一一对应的

15             /*word-break:break-all;*/
16             word-wrap:break-word;

 

 

 

二、如何让html中的不规则单词折行

1、相关知识

word-wrap
word-wrap:break-word;

 

2、代码

word-wrap单词折行

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         
11         div{
12             width:500px;
13             height:300px;
14             background: #ccc;
15             /*word-break:break-all;*/
16             word-wrap:break-word;
17         }    
18     </style>
19 </head>
20 <body>
21     <div>
22         <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
23         <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
24         <p>linux is very much!</p>
25         <p>linux is very much!</p>
26         <p>linux is very much!</p>
27     </div>
28 </body>
29 </html>

 

 

 
posted @ 2018-07-04 12:01  范仁义  阅读(803)  评论(0)    收藏  举报