首先给出问题，截图如下：
ht ML 代码 ：
复制代码
代码如下:
<!DOCTY PE HTML>
<html lang="en-US">
<head>
< ;m eta charset="UTF-8">
<t IT le>固定宽度文字换行</title>
<style type="text/css">
*{m arg in:0;padding:0;}
body{font:12px SimSun;}
a{color:blue;text-decoration:none;}
a:hover{text-decoration:underline;}
.demo{width:100px;mar gin :0 auto;border:1px solid black;background: # aaa;padding:5px;overflow:hidden;}
</style>
</head>
<body>
<p class="demo">
<a hr ef="#">测试</a>
<a href="#">测试</a>
<a href="#">测测试试</a>
<a href="#">测试</a>
<a href="#">测试</a>
<a href="#">测测试试</a>
<a href="#">测试</a>
</p>
</body>
</html>
我们可以看出第一行和第二行由于宽度不够导致词组断开了。
解决此问题有两种方法。
方法一：dis play :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 -s pace: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:nowra p; 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固定宽度并且让最后一行文字换行 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css固定宽度并且让最后一行文字换行的详细内容...