当前位置: 首页>>代码示例>>用法及示例精选>>正文


HTML Style wordWrap用法及代码示例

HTML DOM中的Style wordWrap属性用于设置或返回是否应折断长字以换行到下一行。

用法:

  • 获取wordWrap属性
    object.style.wordWrap
  • 设置wordWrap属性
    object.style.wordWrap = "normal|break-word|initial|inherit"

属性值:


  • normal:这仅用于在断点处断开长单词。

    示例1:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
          DOM Style wordWrap Property 
        </title> 
        <style> 
            .content { 
                border:1px solid; 
                height:200px; 
                width:200px; 
                word-wrap:break-word; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <b> 
          DOM Style wordWrap Property 
        </b> 
        <p> 
          The wordWrap property specifies whether 
          long words should be broken to wrap  
          around to the next line. 
        </p> 
        
        <div class="content"> 
            GeeksforGeeksisacomputerscienceportal. 
        </div> 
        <button onclick="setWordWrap()"> 
          Change wordWrap 
        </button> 
      
        <!-- Script to set wordWrap to normal -->
        <script> 
            function setWordWrap() { 
                elem = document.querySelector('.content'); 
                elem.style.wordWrap = 'normal'; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    • 在单击按钮之前:
      normal-before
    • 单击按钮后:
      normal-after
  • break-word:这用于将牢不可破的单词打断到下一行。

    示例2:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
          DOM Style wordWrap Property 
        </title> 
        <style> 
            .content { 
                border:1px solid; 
                height:200px; 
                width:200px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <b> 
          DOM Style wordWrap Property 
        </b> 
        <p> 
            The wordWrap property specifies 
          whether long words should be broken 
          to wrap around to the next line. 
        </p> 
        <div class="content"> 
            GeeksforGeeksisacomputerscienceportal. 
        </div> 
        <button onclick="setWordWrap()"> 
          Change wordWrap 
        </button> 
      
        <!-- Script to set wordWrap to break-word -->
        <script> 
            function setWordWrap() { 
                
                elem = document.querySelector('.content'); 
                elem.style.wordWrap = 'break-word'; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    • 在单击按钮之前:
      break-before
    • 单击按钮后:
      break-after
  • initial:这用于将属性设置为其默认值。

    示例3:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
          DOM Style wordWrap Property 
        </title> 
        <style> 
            .content { 
                border:1px solid; 
                height:200px; 
                width:200px; 
                word-wrap:break-word; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <b>DOM Style wordWrap Property</b> 
        <p> 
            The wordWrap property specifies  
          whether long words should be broken 
          to wrap around to the next line. 
        </p> 
        <div class="content"> 
          GeeksforGeeksisacomputerscienceportal. 
        </div> 
        <button onclick="setWordWrap()"> 
          Change wordWrap 
        </button> 
      
        <!-- Script to set wordWrap to initial -->
        <script> 
            function setWordWrap() { 
              elem = document.querySelector('.content');

支持的浏览器:下面列出了DOM样式wordWrap属性支持的浏览器:

  • 谷歌浏览器
  • Firefox
  • IE浏览器
  • Opera
  • Safari


相关用法

注:本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM Style wordWrap Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。