Question

我有一个显示多个文本元素的框，一个框接一个框。我不希望每个元素中的文字都换行。相反，如果没有足够的空间，则应截断文本并显示一个椭圆。

使用display: flex并允许每个元素缩小到零很容易做到这一点。

但是较小的元素被缩小太多，以至于文本几乎完全消失了。在那种情况下，我宁愿将较小的元素缩小一些，而将较大的元素缩小一些。也可以通过为每个元素提供更大的最小宽度（例如100px）来实现，以使它不会缩小到某个特定点。

当文本元素的固有宽度之一已经小于100px时，就会发生我的问题。由于我只是指定该元素的最小宽度较长，因此浏览器在该元素后留有额外的空间。我不要多余的空间。

我不想使用Java脚本。我正在寻找使用CSS的解决方案。距离很近，我觉得应该可以，但是我的尝试都没有正确地完成。

如果我事先知道哪些文本元素很小，那么我可以指定这些微小元素根本不弯曲，并获得理想的结果。但是如果不使用javascript，我不知道哪些元素很小。
如果我可以将元素的最小宽度设置为其内部宽度的最小值和100px，那么我将获得所需的结果。尽管CSS确实有一个min()函数可以用于min-width，但不幸的是，似乎不允许我使用max-content作为该函数的参数。
对MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/min-width）的最小宽度的描述指出，fit-content(100px)是指定最小宽度的语法有效方法。我希望制作一个元素的最小内容大小为零，而最大大小是文本元素的固有长度。然后fit-content(100px)将为100px，或者大于固有长度（固有长度）。但是，每当我将fit-content()与参数一起使用时，浏览器就会说该表达式无效。
最后，我尝试使用网格显示。但是随后fit-content()使用固有宽度或100px，但没有进一步扩展。我尝试使用minmax做事没有运气（似乎我不能将fit-content()用作minmax()的参数）。此外，我不知道文本元素的数量，但是网格显示希望我指定该数字，因此我认为网格无法正常工作。

因此，有什么方法可以仅使用CSS来获得所需的结果。由于本文是针对Electron程序的，因此我只关心Chrome作为浏览器。下面有一个示例显示我的每一次尝试。

main {
  display: flex;
  flex-direction: column;
  width: 600px;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}

span {
  background-color: skyblue;
  padding: 10px;
  margin: 0 10px 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

section {
  width: 100%;
  display: flex;
}

.set-min-width span {
  min-width: 100px;
}

.set-min-width .no-shrink {
  flex: none;
  min-width: initial;
}

.use-max-expression span {
  min-width: min(100px, max-content);
}

.use-fit-content div {
  flex: 0 1 auto;
  min-width: fit-content(100px);
  display: flex;
}

.use-fit-content div span {
  min-width: 0;
}

.use-grid {
  display: grid;
  grid-template-columns: fit-content(100px) fit-content(100px) fit-content(100px);
}

.use-grid span {
  min-width: 0;
}

<main>
  <h4>The hidden overflow allows each text item to shrink to nothing<br> Both small and medium elements are heavily truncated<br></h4>
  <section>
    <span>Medium length</span>
    <span>Tiny</span>
    <span>Longer text that has to be truncated to fit within the section.  It is far far far far too big to fit.</span>
  </section>
  <h4>By setting a min-width to 100px I can control truncation of medium element. But the tiny element now has extra space after it that I do not want.</h4>
  <section class="set-min-width">
    <span>Medium length</span>
    <span>Tiny</span>
    <span>Longer text that has to be truncated to fit within the section.  It is far far far far too big to fit.</span>
  </section>
  <h4>1: This is what I want.<br> But to obtain it I had to specify a different style for the tiny element so that it would not flex. But I don't know in advance which elements are tiny.</h4>
  <section class="set-min-width">
    <span>Medium length</span>
    <span class="no-shrink">Tiny</span>
    <span>Longer text that has to be truncated to fit within the section.  It is far far far far too big to fit.</span>
  </section>
  <h4>2: I want the min-width to be the element's max-content if this is smaller than the truncation limit<br> `min(100px, max-content)` would return the correct result, but it is not valid CSS and so is ignored</h4>
  <section class="use-max-expression">
    <span>Medium length</span>
    <span>Tiny</span>
    <span>Longer text that has to be truncated to fit within the section.  It is far far far far too big to fit.</span>
  </section>
  <h4>3: I tried to use fit-content(arg)<br> The inner element has min-width 0, so its min-content size should be 0<br> Its max-content size is the intrinsic width of the text<br> So the fit-content(100px) size should be 100px if that's smaller than intrinsic
    width, or the intrinsic width otherwise.<br> Despite MDN stating that fit-content with argument is valid CSS for min-width, the browser rejects `fit-content(100px)`</h4>
  <section class="use-fit-content">
    <div><span>Medium length</span></div>
    <div><span>Tiny</span></div>
    <div><span>Longer text that has to be truncated to fit within the section.  It is far far far far too big to fit.</span></div>
  </section>
  <h4>4: Using fit-content(100px) in a grid does not work either. The elements are indeed not expanded if natural width is smaller than 100px. But the elements do not flex to take rest of space.<br> Besides a grid won't work because the number of columns is
    not known in advance.
  </h4>
  <section class="use-grid">
    <span>Medium length</span>
    <span>Tiny</span>
    <span>Longer text that has to be truncated to fit within the section.  It is far far far far too big to fit.</span>
  </section>
</main>

Answer 1

我正在给这个玩法，这是我能提出的最好的宽度。我可以看到的问题是，flex-box非常糟糕，因为如果不使用某种类型的max-width来设置其内部元素，则不遵守这些规则。我在Stackoverflow上发现了其他一些答案，但它们似乎都无法真正解决您的要求。在我的回答中，我在跨度上使用了max-width，同时使用了text-overflow: ellipsis和overflow: hidden来创建接近于您所请求的内容。

下面的代码和密码笔-这里https://codepen.io/rl4444/pen/oNLQVRr?editors=1100

HTML

<main>
  <h4>my solution</h4>
  <section class="box-items">
    <span>Medium length</span>
    <span>Tiny</span>
    <span>Longer text that has to be truncated to fit within the section.  It is far far far far too big to fit.</span>
  </section>
</main>

CSS

main {
  max-width: 600px;
  width: 100%;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  position: relative;
  box-sizing: border-box;
}

span {
  background-color: skyblue;
  padding: 10px;
  margin: 0 10px 10px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
}

section {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  
}


.box-items span {
  border: 1px solid red;
  overflow: hidden;
}

对于CSS flexbox，允许元素缩小到最小（其固有宽度，绝对长度）

1 个答案: