css固定不动宽度而且让最终1写作字换行

日期:2020-09-24 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

今日群里有人问了个难题:在固定不动宽度的块级元素中,里边的內容最终1词组在宽度不足的状况下沒有换行,怎样让它换到下1行?这里我梳理了下群里的方式,共享给大伙儿。
最先得出难题,截图以下:

html 编码

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<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>

大家能够看出第1行和第2行因为宽度不足致使词组断掉了。
处理此难题有两种方式。
方式1:display:inline-block;
html 编码:

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<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>

方式2:float:left;white-space:nowrap;
html 编码:

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<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