检测列表是否溢出并在css中给它一个类答案

【问题标题】：Detect if a list has overflown and give it a class, in css检测列表是否溢出并在css中给它一个类
【发布时间】：2019-05-17 04:01:23
【问题描述】：

如果没有 javascript 可以做到这一点，我想在 CSS 中执行此操作。

我有一个包含 x 个项目的列表，它可以是任何东西。这是一张图片

容器是屏幕的 %，所以当我调整大小时，ul 变小，因此列表项换行。

如果有 1 行，我想做的是给 ul 一个居中的文本对齐，如果有 2 行，给 ul 一个左对齐的文本。

这可能只使用 css 吗？

我不能做媒体查询，因为项目的数量可以是任何东西。

【问题讨论】：

查看stackoverflow.com/a/55953837/8620333
谢谢我看看
几年前我做过类似的事情，我在我的案例中找到的解决方案是简单地给<li> 一个display: inline-block; 并使<ul> 具有text-align: justify;。它对我有用，如果它对你的情况也有帮助，请告诉我。
谢谢，我会试一试，让你知道
是换行还是换行？

标签： html css

【解决方案1】：

您在寻找类似this 的东西吗？

body {
  background: #11b5c3;
  font-family: sans-serif;
  padding: 50px;
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 100;
}


/*
.container {
  border-top: 1px solid #fff;
  padding: 10px 0;
  margin: 0 auto;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width:75%;
}

.container li {
  background: #fefefe;
  margin: 3px;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  color: #999;
}*/

.container {
  border-top: 1px solid #fff;
  padding: 10px 0;
  margin: 0 auto;
  list-style: none;
  /* display:flex; */
  /*justify-content:center;*/
  flex-wrap: wrap;
  max-width: 500px;
  text-align: justify;
}

.container li {
  background: #fefefe;
  ;
  margin: 3px 0;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  color: #999;
  display: inline-block;
  font-size: 16px;
}

<h1>Tools</h1>
<ul class="container">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

【讨论】：

它应该在中间只有1行，然后离开超过1行
嗨，我已经根据您的需要重新编码，我认为它现在可以工作了。请检查上面的代码 sn-p 或查看Codepen

【解决方案2】：

我捎带了@Mobarak Ali，但我认为在这种情况下你想使用网格而不是 flexbox。如果您将 flexbox 与 flexwrap: wrap; 和 justify-content: center; 一起使用，则项目将始终居中。但是，如果项目不换行，则 OP 希望项目居中，然后在每个后续行的左侧对齐。因为网格用于 2d 布局，所以可以很容易地实现这一点。

添加或删除列表项以查看效果。如果您愿意，这是一个代码笔。 https://codepen.io/zenRyoku/pen/rgWBEp

body {
  background: teal;
  font-family: sans-serif;
  padding: 50px;
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 100;
}

.container {
  border-top: 1px solid #fff;
  padding: 10px 0;
  margin: 0 auto;
  list-style: none;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat( auto-fit, minmax(50px, 1fr) );
  grid-gap: 1rem;
  max-width: 500px;
}

.container li {
  width: 50px;
  background: #fefefe;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  color: #999;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
<h1>Tools</h1>
<ul class="container">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
  </body>
</html>

【讨论】：

请注意，项目不会居中，但每个网格单元格内的内容会居中，所以不像 OP 想要的那样（减少项目数量，你会看到）
谢谢你，但最新的 IE 不支持网格布局：/