實現強制換行的CSS程式碼

admin發表於2017-02-24
CSS

通常情況下，如果內容超出容器的寬度就會自動實現換行，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:100px;
  height:100px;
  background-color:green;
}
</style>
</head>
<body>
<div id="box">螞蟻部落歡迎您</div>
</body>
</html>

以上程式碼可以正常實現換行效果，但是實際情況往往並非如此，再看一段程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:100px;
  height:100px;
  background-color:green;
}
</style>
</head>
<body>
<div id="box">AAAAAAAAAAAAAAAAAAAAAA</div>
</body>
</html>

以上程式碼中，並不能實現換行效果，也就是遇到這種成串中間沒有間隔的英文字元或者數字的時候，預設情況下就不能夠實現換行了，所以就要人為的進行強制換行，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:100px;
  height:100px;
  background-color:green;
  word-wrap:break-word; 
  word-break:break-all;
}
</style>
</head>
<body>
<div id="box">AAAAAAAAAAAAAAAAAAAAAA</div>
</body>
</html>

相關文章