zoukankan html css js c++ java

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>

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

查看全文

相关阅读:
Java学习——文件和IO流
 Java多线程——ThreadLocal类的原理和使用
 Java多线程——线程八锁案例分析
 Django 模版语法一
 Django 命令行调用模版渲染
 Django 使用 locals() 函数
 Django 加载 app 中的urls
Django 传递额外参数及 URL别名
 Django 无名参数与有名参数
 Django 项目中添加静态文件夹

原文地址：https://www.cnblogs.com/ChivanTam/p/5546021.html