发表新帖
发表新帖

Wrap a long single word using CSS

前端 未结
关注
7 1858
梦谈多话
梦谈多话 2021-01-04 17:52

I tried to wrap a single word which contains around 500+ chars in a div. 



        

                      

              相关标签:
       

      
      
      

        

          7条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  梦毁少年i        
                
              
    
                            
    
                2021-01-04 18:24
              
    
            
    
            
    
                                                                       

    Try this. It worked for me.
    


    <html>
<head></head>
<body>
  <div style="width:200px;">
    <span style="width:100%;table-layout:fixed;word-wrap:break-word;display:inline-table">
      hadfskldfjsdjlfjlsdkflkdsfsdrfsdfsdfsfsdfsdfsdfsdfsdfsd
    </span>
  <div>
</body>
</html>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  眼角桃花        
                
              
    
                            
    
                2021-01-04 18:28
              
    
            
    
            
    
                                                                       

    Here is the code you should use:
    


    

    

    .wrapword {
  width: 200px;
  -ms-word-break: break-all;
  word-break: break-all;
  white-space: pre-wrap
}
    

    <div class="wrapword">
  dswfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfug
</div>
    

    

    

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  一向        
                
              
    
                            
    
                2021-01-04 18:33
              
    
            
    
            
    
                                                                       

    There is property in css:
    


    .selector {
    word-wrap: normal|break-word;
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  眼角桃花        
                
              
    
                            
    
                2021-01-04 18:36
              
    
            
    
            
    
                                                                       

    word-wrap: break-word should give you the result you’re after.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  暗喜        
                
              
    
                            
    
                2021-01-04 18:40
              
    
            
    
            
    
                                                                       

    Try add some overflow - hidden, scroll, auto ...
    


     .wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
   overflow:hidden;
}

    


    Also your Followed answer contains oveflow: scroll;
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  自闭症患者        
                
              
    
                            
    
                2021-01-04 18:42
              
    
            
    
            
    
                                                                       

    Because your long word is within a <table> - you need to add table-layout: fixed;
    


    table { 
   width: 100%; 
   word-wrap:break-word;
   table-layout: fixed;
}

    


    

    

    table { 
   width: 100%; 
   word-wrap:break-word;
   table-layout: fixed;
}
    

    <table ><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p>
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu

</p></div> </td></tr></table>
    

    

    

    


    FIDDLE
    


    Explanation:
    


    The default value for table-layout is auto which means that the browser will decide the width of a column based on the content of the table cells.
    


    In this case, the table layout algorithm will look at that really long word and say: 'heck, i'll need a really wide column to fit that word in'  
    


    By setting table-layout to fixed - The browser determines the width of the columns based on the width of the cells in the first row without taking into account the amount of content present in other rows.  (See MDN) 
    


    Here, there is one row with one cell - so table-layout: fixed says: make that cell the width of the entire table!  (was has width: 100%)
    


    NB: For table-layout: fixed to take effect, the width of the table must be set (with a value other than auto)
    


    For more details about table-layout - See this article  
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
   
                                  

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          

        

      

       
      
    
    

          
 
     
 

        
热议问题