css 文本溢出和网格答案

【问题标题】：css text overflow and gridcss 文本溢出和网格
【发布时间】：2021-09-13 05:25:20
【问题描述】：

我正在尝试在 div 2 中创建跨度，一旦它们填满可用空间，它们就会占用 2fr 和 1fr 空间......它几乎没有规则：

如果有空间，第一个跨度将填满可用空间：

<div>
   <span>longgggggggggg</span>
   <span>text</span>
</div>

结果：

longgggggggggg text

如果溢出，则将它们分隔为 2fr 和 1 fr：

<div>
   <span>longgggggggggggggggggg</span>
   <span>textttttttttt</span>
</div>

结果：

longgggggggg... textt...

如果它们很短，它们会向左浮动（另外，第二部分可以填充剩余部分，仅当第一部分填充空间时才限制为 1fr）：

<div>
   <span>short</span>
   <span>textttttt</span>
</div>

结果：

short textttttt

【问题讨论】：

你能解释一下你到底想要什么吗？
我希望两个 spans 在溢出时适合 div
到目前为止您尝试过什么，该 div 的宽度或最大宽度是多少？适应跨度的大小，一个是另一个大小的两倍，或者反过来，或者像你评论的那样，答案最终会变大。 CSS 无法做到这一点（2fr/1fr 或 ?? ）。忘记 2fr/1fr 部分，您可能会发现一些足够流畅的东西；) - / - 这是一个可能的例子，似乎接近问题jsfiddle.net/t7scwzL0

标签： javascript html css

【解决方案1】：

您可以使用max-width 和min-width 实现您想要的效果。我认为在这种情况下你不能使用fr，但你可以使用百分比来达到类似的效果。您可以尝试复制下面的代码并调整文本的长度，看看它是否按照您想要的方式执行。

span{
  font-size: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 1rem;
}
div{
  display: flex;
  white-space: nowrap;        
}
.first{
  min-width: 33%;
  max-width: 66%;
}
.second{
  width: 100%;
  min-width: 33%;
  color: red;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
      <div>
        <span class="first">
Cumque iusto nisi inventore. Commodi, neque animi??</span>
        <span class="second">2nd text Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime aliquid doloremque recusandae culpa exercitationem at quam, dolores atque sapiente nihil iste nostrum possimus, quibusdam molestias. Laudantium deleniti repudiandae aliquid voluptatibus!
Labore sunt neque laboriosam harum nulla. A itaque pariatur voluptate corrupti quos quia minima? Enim similique, itaque recusandae suscipit maxime facilis magni placeat ipsum quasi dolorem obcaecati dolores velit porro!
Fugiat maxime unde numquam nam esse ab. Similique maxime suscipit nihil qui vitae, quibusdam quae perferendis labore cupiditate laboriosam vel praesentium sed eaque adipisci dolor obcaecati eum? Nisi, ut corrupti?
Numquam esse voluptatibus ducimus quisquam sed aliquid sunt sit voluptatum, eaque adipisci quae ullam, odit obcaecati incidunt dignissimos, quasi cum prov</span>
      </div>
  </body>
</html>

【讨论】：

修正了问题更清晰，如果有空间，两个部分都可以大于 66% 或 33%
@eifr width:100% 和 min-width 而不是 max-width 第二类就可以了。

【解决方案2】：

您可以使用 Flex 来做到这一点。

<div>
  <span class="fist">short</span>
  <span class="last">text</span>
</div>


div {
  display: flex;
}
div > span {    
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
div > span.fist {
  flex-shrink: 1;
}
div > span.last {
  flex-shrink: 0;
  max-width: 33%;
}

【讨论】：

修正了问题更清楚，如果有空间，两个部分都可以大于 66% 或 33%，所以max-width 是有问题的
我认为没有办法用 css 实现这一点。

【解决方案3】：

用网格解决了它！ ?

.container {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(0, max-content));
}

.first {
    grid-column: span 2;
}


span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 
<div class="container">
  <span class="fist">short</span>
  <span class="last">text</span>
</div>

谢谢你们:)

【讨论】：