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

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

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

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="#">測(cè)試</a>
<a href="#">測(cè)試</a>
<a href="#">測(cè)測(cè)試試</a>
<a href="#">測(cè)試</a>
<a href="#">測(cè)試</a>
<a href="#">測(cè)測(cè)試試</a>
<a href="#">測(cè)試</a>
</p>
</body>
</html>

我們可以看出第一行和第二行由于寬度不夠?qū)е略~組斷開(kāi)了。
解決此問(wèn)題有兩種方法。
方法一：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="#">測(cè)試</a>
<a href="#">測(cè)試</a>
<a href="#">測(cè)測(cè)試試</a>
<a href="#">測(cè)試</a>
<a href="#">測(cè)試</a>
<a href="#">測(cè)測(cè)試試</a>
<a href="#">測(cè)試</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="#">測(cè)試</a>
<a href="#">測(cè)試</a>
<a href="#">測(cè)測(cè)試試</a>
<a href="#">測(cè)試</a>
<a href="#">測(cè)試</a>
<a href="#">測(cè)測(cè)試試</a>
<a href="#">測(cè)試</a>
</p>
</body>
</html>

測(cè)試的瀏覽器：ie6,ie7,ie8,firefox,google,safari,opera

相關(guān)文章

最新評(píng)論