我有一个奇怪的问题。 在 250px 宽的引导程序容器中的一行中有多个元素。 我希望元素在 250px 列内包装和填充。 几个月前，这曾经在 CHROME 中工作，但现在不再有效了！ 适用于IE，Safari，Edge。 Chrome 中发生了什么，我怎样才能让它在 Chrome 中再次工作，只需进行最少的更改？
代码如下：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<style>
.tag {
height: 26px;
width: auto;
border: 1px solid #CAD8F3;
background-color: #DEE7F8;
border-radius: 6px;
line-height: 24px;
text-align: center;
display:inline-block;
padding-right: 10px;
padding-left: 10px;
font-family: Arial, sans-serif;
font-size: 100%;
color: #555555;
margin-bottom: 3px;
cursor: pointer;
}
.tag:hover {
background-color:#b2ccf7;
border: 1px solid #5b7596;
}
</style>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- CODE STYLE -->
<!-- OBJECTIVE IS TO WRAP SPAN ITEMS WITHIN THE 250PX COLUMN WIDTH -->
<!-- WORKS IN IE, SAFARI, EDGE, BUT NOT IN CHROME -->
<!-- *** USED TO WORK IN CHROME *** A FEW MONTHS AGO, BUT NOW GET A LONG TAGLIST THAT FALLS OFF THE PAGE, DOES NOT WRAP WITHIN THE 250PX COLUMN -->
<div id="side" style="width: 250px; margin-left: 50px; margin-top: 0px;">
<div class="container" id="custom_tags_show" style="display:block;">
<span id="tags">
<!-- BELOW IS GENERATED BY SQL COMMAND, WOULD LIKE TO KEEP THIS FORMAT IF POSSIBLE, TO AVOID CHANGING CODE IN MANY PLACES -->
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span> <span class="tag tagHover" data-tag="tag">food <span style="font-size:70%;">(3)</span></span> <span class="tag tagHover" data-tag="tag">super-natural <span style="font-size:70%;">(3)</span></span> <span class="tag tagHover" data-tag="tag">booboo <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">e <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">new <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">asdf <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">huno <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">two <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag"> <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">dsfg <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">time <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">growth <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">contradictions <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">archaeology <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">family <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">hotmail <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">shocking <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">baby <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">big <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">dd <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">ff <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">four <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">g <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">job <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">sss <span style="font-size:70%;">(1)</span></span>
</span>
</div>
</div>
<br>
<!-- THIS WORKS IN CHROME TO WRAP THE SPAN OBJECTS, BUT THIS IS NOT WHAT IS GENERATED BY THE SQL COMMAND AND WOULD RATHER NOT HAVE TO CHANGE CODE TO ACCOMODATE THIS -->
<div id="side" style="width: 250px; margin-left: 50px; margin-top: 0px;">
<div class="container" id="custom_tags_show" style="display:block;">
<span id="tags">
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span>
<span class="tag tagHover" data-tag="tag">food <span style="font-size:70%;">(3)</span></span>
<span class="tag tagHover" data-tag="tag">super-natural <span style="font-size:70%;">(3)</span></span>
<span class="tag tagHover" data-tag="tag">booboo <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">e <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">new <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">asdf <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">huno <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">two <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag"> <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">dsfg <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">time <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">growth <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">contradictions <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">archaeology <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">family <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">hotmail <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">shocking <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">baby <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">big <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">dd <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">ff <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">four <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">g <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">job <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">sss <span style="font-size:70%;">(1)</span></span>
</span>
</div>
</div>
</body>
</html>
你应该使用弹性框来做同样的事情。更多信息在这里：-
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
将此代码片段添加到您的代码中：-
#tags{
display: flex;
flex-wrap: wrap;
}
当我删除每个标签元素末尾的   时，我发现包装在 Chrome 中有效：
原始标签元素：
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span>
从末尾删除 的标记元素
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span>
然后，使用CHROME包装的完整长代码行是：
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span><span class="tag tagHover" data-tag="tag">food <span style="font-size:70%;">(3)</span></span><span class="tag tagHover" data-tag="tag">super-natural <span style="font-size:70%;">(3)</span></span><span class="tag tagHover" data-tag="tag">booboo <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">e <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">new <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">asdf <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">huno <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">two <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag"> <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">dsfg <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">time <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">growth <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">contradictions <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">archaeology <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">family <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">hotmail <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">shocking <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">baby <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">big <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">dd <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">ff <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">four <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">g <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">job <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">sss <span style="font-size:70%;">(1)</span></span>
然后在每个元素之间留出一点空间，可以为每个标签元素进行一些边距设置(此处未显示(。
不知道为什么Chrome在该位置对 的反应与其他浏览器不同(包装很好(，但这就是我发现的。