css固定寬度并且讓最后一行文字換行
發(fā)布時間：2013-01-10 14:37:40 作者：佚名 
我要評論
我要評論在固定寬度的塊級元素中，里面的內(nèi)容最后一詞組在寬度不夠的情況下沒有換行，如何讓它換到下一行,這個問題一直很是疑惑，接下來介紹解決方法，感興趣的朋友可以了解下哦
今天群里有人問了個問題：在固定寬度的塊級元素中，里面的內(nèi)容最后一詞組在寬度不夠的情況下沒有換行，如何讓它換到下一行？這里我整理了下群里的方法，分享給大家。
首先給出問題，截圖如下：
html 代碼：
<!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>
我們可以看出第一行和第二行由于寬度不夠導致詞組斷開了。
解決此問題有兩種方法。
方法一：display:inline-block;
html 代碼：
<!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 代碼：
<!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
首先給出問題，截圖如下：
html 代碼：
復制代碼
代碼如下:<!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>
我們可以看出第一行和第二行由于寬度不夠導致詞組斷開了。
解決此問題有兩種方法。
方法一：display:inline-block;
html 代碼：
復制代碼
代碼如下:<!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 代碼：
復制代碼
代碼如下:<!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
相關文章
- 本文給大家介紹css文字換行裁剪功能，包括css的一些屬性知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-12-07
- 下面小編就為大家?guī)硪黄猚ss控制文字自動換行的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-12
- 文字會自動換行，可以使用css來解決這個問題，word-break屬性想必大家并不陌生吧，不熟悉的朋友可以看看本文2014-05-08
div+CSS設置一行內(nèi)文字超過寬度不換行且不顯示截斷文字加...
當一行文字超過DIV或者Table的寬度的時候，瀏覽器中默認是讓它換行顯示的，如果我們不想讓他換行顯示那要怎么辦呢，下面為大家介紹下如何設置div+CSS設置一行內(nèi)文字超過寬2013-12-24- 因為都瀏覽器的問題，所以要考慮到兼容性。2009-11-20
css是如何實現(xiàn)在頁面文字不換行、自動換行、強制換行的方法
這篇文章主要介紹了css是如何實現(xiàn)在頁面文字不換行、自動換行、強制換行的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-02