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>

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

查看全文

相关阅读:
获取文件的MD5码（C#）
存储过程查询表的记录数
 通用分页
 解析SQLServer事务日志压缩与删除的方法
 性能测试之测试工具(一)
测试框架学习HttpRunner之功能扩展（十一）
测试框架学习HttpRunner之Locust性能测试（十）
测试框架学习之HttpRunner Validate & Prettify（九）
测试框架学习之HttpRunner测试用例之用例分层设计（八）
测试框架学习之HttpRunner用例执行运行测试以及测试报告（七）

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