<!doctype html>
<html>
<head>
<style>
.left,.right{float:left;}
.left{
width:40%;
background:black;
height:600px;
color:white;
}
.right{
width:60%;
height:600px; }
img{
height:100%;
width:100%;}
#div{
margin:35% 50px;}
h1{
font-size:50px;
}
</style>
</head>
<body>
<div class="left">
<div id="div">
<h1>Alice.</h1>
<p>Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice.Alice</p>
</div>
</div>
<div class="right">
<img src="https://static1.bcjiaoyu.com/735fef440c68aa8d551db6ec2b22d704_e.jpg-1920x1766"/>
</div>
</body>
</html>
???????在這個代碼中,顯示效果并未如愿，p標(biāo)簽的內(nèi)容沒有自動換行教馆，而是延續(xù)到來了圖片后面馋缅，并且被擋住了扒腕。這是因為使用英文的時候，如果連續(xù)輸入不加空格會被認(rèn)為是一個單詞萤悴，而在css中默認(rèn)同一個單詞不會自動斷詞換行瘾腰。
???????解決這個問題，需要用到CSS3中的word-break屬性覆履，其值有三個：normal蹋盆，使用瀏覽器默認(rèn)的換行規(guī)則；break-all硝全，允許在單詞內(nèi)換行栖雾；keep-all，只能在半角空格或連字符處換行伟众。使用break-all即可岩灭。
