欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css固定寬度并且讓最后一行文字換行

  發(fā)布時間：2013-01-10 14:37:40   作者：佚名   我要評論
在固定寬度的塊級元素中，里面的內(nèi)容最后一詞組在寬度不夠的情況下沒有換行，如何讓它換到下一行,這個問題一直很是疑惑，接下來介紹解決方法，感興趣的朋友可以了解下哦
今天群里有人問了個問題：在固定寬度的塊級元素中，里面的內(nèi)容最后一詞組在寬度不夠的情況下沒有換行，如何讓它換到下一行？這里我整理了下群里的方法，分享給大家。
首先給出問題，截圖如下：

html 代碼：

復(fù)制代碼
代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>固定寬度文字換行</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px SimSun;}
a{color:blue;text-decoration:none;}
a:hover{text-decoration:underline;}
.demo{width:100px;margin:0 auto;border:1px solid black;background:#aaa;padding:5px;overflow:hidden;}
</style>
</head>
<body>
<p class="demo">
<a href="#">測試</a>
<a href="#">測試</a>
<a href="#">測測試試</a>
<a href="#">測試</a>
<a href="#">測試</a>
<a href="#">測測試試</a>
<a href="#">測試</a>
</p>
</body>
</html>

我們可以看出第一行和第二行由于寬度不夠?qū)е略~組斷開了。
解決此問題有兩種方法。
方法一：display:inline-block;
html 代碼：

復(fù)制代碼
代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>固定寬度文字換行</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px SimSun;}
a{color:blue;text-decoration:none;}
a:hover{text-decoration:underline;}
.demo{width:100px;margin:0 auto;border:1px solid black;background:#aaa;padding:5px;overflow:hidden;}
.demo1 a{display:inline-block;}
</style>
</head>
<body>
<p class="demo demo1">
<a href="#">測試</a>
<a href="#">測試</a>
<a href="#">測測試試</a>
<a href="#">測試</a>
<a href="#">測試</a>
<a href="#">測測試試</a>
<a href="#">測試</a>
</p>
</body>
</html>

方法二：float:left;white-space:nowrap;
html 代碼：

復(fù)制代碼
代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>固定寬度文字換行</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px SimSun;}
a{color:blue;text-decoration:none;}
a:hover{text-decoration:underline;}
.demo{width:100px;margin:0 auto;border:1px solid black;background:#aaa;padding:5px;overflow:hidden;}
.demo2 a{float:left;white-space:nowrap;margin-right:5px;}
</style>
</head>
<body>
<p class="demo demo2">
<a href="#">測試</a>
<a href="#">測試</a>
<a href="#">測測試試</a>
<a href="#">測試</a>
<a href="#">測試</a>
<a href="#">測測試試</a>
<a href="#">測試</a>
</p>
</body>
</html>

測試的瀏覽器：ie6,ie7,ie8,firefox,google,safari,opera

相關(guān)文章

最新評論