word-wrap&word-break的区别

在我们在块级元素中输出英文，你不会发现有问题的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>word-wrap and word-brak</title>
    </head>
    <style>
    .box { width:1000px; height:300px; background-color: #FF0000;}
    .box p { width: 200px; height: 100px; background: #FFE4C4;}    
    </style>
    
    <body>
        <div class="box">
            <p>word-wrap and word-brak the difference</p>        
        </div>
    </body>
</html>

当出现一个单词的长度过长时，你会发现它冲出了块级元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>word-wrap and word-brak</title>
    </head>
    <style>
    .box { width:1000px; height:300px; background-color: #FF0000;}
    .box p { width: 200px; height: 100px; background: #FFE4C4;}    
    </style>
    
    <body>
        <div class="box">
            <p>word-wrap and word-brak the difference . i am longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</p>        
        </div>
    </body>
</html>

 

这是时候我们需要用上word-wrap或者word-break，但他们有什么区别呢？
一:
word-wrap: break-word;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>word-wrap and word-brak</title>
    </head>
    <style>
    .box { width:1000px; height:300px; background-color: #FF0000;}
    .box p { width: 300px; height: 100px; background: #FFE4C4; word-wrap: break-word;}    
    </style>
    
    <body>
        <div class="box">
            <p>word-wrap and word-brak the difference . i am longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</p>        
        </div>
    </body>
</html>

将单词打断了并换行。

二:
word-break: break-word;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>word-wrap and word-brak</title>
    </head>
    <style>
    .box { width:1000px; height:300px; background-color: #FF0000;}
    .box p { width: 300px; height: 100px; background: #FFE4C4; word-break: break-word;}    
    </style>
    
    <body>
        <div class="box">
            <p>word-wrap and word-brak the difference . i am longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</p>        
        </div>
    </body>
</html>

word-break: break-word; 的效果跟 word-wrap: break-word;基本一样

当word-break还有一个值是break-all

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>word-wrap and word-brak</title>
    </head>
    <style>
    .box { width:1000px; height:300px; background-color: #FF0000;}
    .box p { width: 300px; height: 100px; background: #FFE4C4; word-break: break-all;}    
    </style>
    
    <body>
        <div class="box">
            <p>word-wrap and word-brak the difference . i am longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</p>        
        </div>
    </body>
</html>

将空余的位置填补了，显示更佳！

posted @ 2016-05-31 15:31  Vtzf、  阅读(195)  评论(0)  编辑  收藏  举报