Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>        <p>1.进行长单词判断再单词内断句换行:</p>   
        <p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>
        <p>2.直接进行单词内断句换行:</p>
        <p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>
</div>
    </body>
</html>
 
div{
   border:1px solid red;
   width:250px;
   margin:50px auto;
   padding:20px;
}
/* 允许单词内断句,首先会尝试挪到下一行,看看下一行的宽度够不够,
不够的话就进行单词内的断句 */ 
.breakword{
     word-wrap: break-word;
   }
/* 断句时,不会把长单词挪到下一行,而是直接进行单词内的断句 */
.breakAll{
      word-break:break-all;
   }       
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers