1.我之前在寫一個外國部落格的時候遇到了一個問題，關于文字環繞顯示問題:
1.圖檔浮動，中文文字會發生環繞效果
<!DOCTYPE html>
<html>
<head>
<title>css文字環繞</title>
<style>
.img-left{
border:px solid #005588;
width:px;
}
.img-left img{
float:left;
width:px;
}
</style>
</head>
<body>
<div class='img-left'>
<img src='1.jpg'>
這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文
</div>
</body>
</html>
得出的頁面效果是:
然後把中文換成英文:
<!DOCTYPE html>
<html>
<head>
<title>數組去重</title>
<style>
.img-left{
border:px solid #005588;
width:px;
}
.img-left img{
float:left;
width:px;
}
</style>
</head>
<body>
<div class='img-left'>
<img src='1.jpg'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
以下是頁面效果:
那麼應該如何解決這種問題:我們可以使用CSS屬性：word-break:break-all;在恰當的斷字點進行換行
例如:
<!DOCTYPE html>
<html>
<head>
<title>數組去重</title>
<style>
.img-left{
border:px solid #005588;
width:px;
}
.img-left img{
float:left;
width:px;
}
.img-left{
word-break:break-all;
}
</style>
</head>
<body>
<div class='img-left'>
<img src='1.jpg'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
結果是:
那麼如何取消文字環繞效果呢？
(1)給文字外面加一個div标簽，然後給樣式設定為overflow:hidden,使該盒子成為絕緣容器
例如:
<!DOCTYPE html>
<html>
<head>
<title>數組去重</title>
<style>
.img-left{
border:px solid #005588;
width:px;
}
.img-left img{
float:left;
width:px;
}
.img-left{
word-break:break-all;
}
.a{
overflow:hidden;
}
</style>
</head>
<body>
<div class='img-left'>
<img src='1.jpg'>
<div class='a'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</body>
</html>
結果是:
(2)也可以給文字的所在盒子添加margin,也可以使其與圖檔左右分離,這樣就不會有環繞效果