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>

    将空余的位置填补了,显示更佳!

  • 相关阅读:
    【Python-虫师】自动化测试模型--参数化
    【Loadrunner】【浙江移动项目手写代码】代码备份
    虫师的性能测试思想html网页学习
    Loadrunner之https协议录制回放报错如何解决?(九)
    【Python虫师】多窗口定位
    【虫师讲Selenium+Python】第三讲:操作测试对象
    【虫师Python】第二讲:元素定位
    【小甲鱼】【Python】正则表达式(三)
    【小甲鱼】【Python】正则表达式(二)
    js提交数据时需判断是点击事件还是回车键
  • 原文地址:https://www.cnblogs.com/ChivanTam/p/5546021.html
Copyright © 2011-2022 走看看