<!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标签的内容没有自动换行，而是延续到来了图片后面，并且被挡住了。这是因为使用英文的时候，如果连续输入不加空格会被认为是一个单词，而在css中默认同一个单词不会自动断词换行。
解决这个问题，需要用到CSS3中的word-break属性，其值有三个：normal，使用浏览器默认的换行规则；break-all，允许在单词内换行；keep-all，只能在半角空格或连字符处换行。使用break-all即可。
网友评论