zoukankan      html  css  js  c++  java
  • 图解CSS3----word-wrap(单词换行)

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
      <title></title>
       <style type="text/css">
           .head{
              margin: 0 0 0 100px;
           }
           .container{
             margin: 0 0 0 100px;
           }
           .container div{
             230px;
            height: 200px;
            border: 1px solid red;
            padding: 20px;
           }
           .d{
    
           }
           .d1{
            word-wrap: normal;
           }
           .d2{
            word-wrap: break-word;
           }
       </style>
    </head>
    <body>
        <div class="head">
          <h1>word-wrap 文本换行</h1>
          <h2>首页<a href="index.html"></a></h2>
        </div>
        <div class="container">
             <h2>默认normal</h2>
            <div class = 'd'>
             阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺
             sunlikesunlikesunlikesunlikesunlikesunlikesunlikesunlike
             sunlike sunlike sunlike sunlike sunlike sunlike sunlike sunlike 
             </div> 
             <h2>word-wrap: normal;</h2>
             <div class = 'd1'>
             阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺
             sunlikesunlikesunlikesunlikesunlikesunlikesunlikesunlike
              sunlike sunlike sunlike sunlike sunlike sunlike sunlike sunlike 
             </div> 
              <h2>word-wrap: break-word;</h2>
              <div class = 'd2'>
             阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺阿理旺旺
             sunlikesunlikesunlikesunlikesunlikesunlikesunlikesunlike
              sunlike sunlike sunlike sunlike sunlike sunlike sunlike sunlike 
             </div> 
        </div>
    </body>
    </html>
    

      

    效果1:

    总结1:默认情况下,word-wrap的值为normal,中文字符自动换行,英文单词不断行

                (图解CSS3:默认值,浏览器只在半角空格或者连字符的地方进行换行)

    效果2:

    总结2:设置word-wrap的值为normal时,中文字符自动换行,英文单词不会截断来换行,超出本分直接溢出

      (图解CSS3:默认值,浏览器只在半角空格或者连字符的地方进行换行)

    效果3:

    总结3:设置word-wrap值为break-word时,中文自动换行,英文单词或字符截断换行

      (图解CSS3:将内容在边界换行(不截断英文单词换行))

  • 相关阅读:
    <自动化测试方案_5>第五章、代码单元自动化测试
    <自动化测试方案_4>第四章、选型标准
    <自动化测试方案_3>第三章、怎么样实现自动化测试?(How)
    Jmeter Beanshell 用法
    Jmeter调用自定义jar包
    JMeter中文返回乱码
    项目如何提测?
    JMeter 接口测试基础
    JMeter接口测试_参数化
    mac /linux vi/vim永久显示行号开启高亮模式
  • 原文地址:https://www.cnblogs.com/SunlikeLWL/p/7239202.html
Copyright © 2011-2022 走看看