用flex从溢流包装中删除额外的水平宽度

发布于 2025-01-25 17:16:59 字数 2321 浏览 2 评论 0原文

本质上，我试图删除/防止当块元素的水平行包裹着任何一个块元素时，创建的额外水平宽度。也就是说，我希望包含溢出元素的div的宽度仅为非包装元素的大小。

以下代码可用于查看所讨论的问题：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="example.css">
</head>
<body>
  <div class="card">
    <div class="card-content">
      <div>
        <div class="row">
          <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
          <div>
            <div class="row">
              <div class="note-tags-list">
                <p id="blank-tag">.</p>
                <p class="tag note-tag">crunchy</p>
                <p class="tag note-tag">recipe</p>
                <p class="tag note-tag">carrot</p>
              </div>
              <p id="text-that-should-stay">I stay</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

/* example.css */
@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

#blank-tag {
  width: 30px;
  min-width: 30px;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.note-tag {
  width: 175px;
  min-width: 0px;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
}

为了轻松，可以在以下JSFiddle中看到上面的代码，尽管以上代码在本地运行上述代码将产生相同的结果： https://jsfiddle.net/5l7u2gkp/1/ 。

这是一个显示问题的GIF，然后在视觉上是理想的：

原文

Essentially, I am trying to remove/prevent the extra horizontal width created when a horizontal row of block elements has any of the block elements wrapped. That is, I want the width of the div containing the overflow elements to be just the size of the nonwrapped elements.

The following code can be used to see the issue in question:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="example.css">
</head>
<body>
  <div class="card">
    <div class="card-content">
      <div>
        <div class="row">
          <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
          <div>
            <div class="row">
              <div class="note-tags-list">
                <p id="blank-tag">.</p>
                <p class="tag note-tag">crunchy</p>
                <p class="tag note-tag">recipe</p>
                <p class="tag note-tag">carrot</p>
              </div>
              <p id="text-that-should-stay">I stay</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

/* example.css */
@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

#blank-tag {
  width: 30px;
  min-width: 30px;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.note-tag {
  width: 175px;
  min-width: 0px;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
}

For ease, the code above can be seen in the following JSFiddle, though running the above code locally will produce the same result: https://jsfiddle.net/5L7u2gkp/1/.

Here is a gif that shows the issue and then what would be ideal visually:

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦里梦着梦中梦 2025-02-01 17:16:59

第二次编辑

我可能不会让您正确，但是删除空白标签时没有额外的宽度。

如果您在 gap 之间谈论node-title和note-tags-list，它将源自<代码> Flex-GROW：0; ，这是Flex项目的默认值。您可以添加到.tag flex-Grow 属性为flex-grow：1;，它将使您的标签生长到它们可以获得的最大空间。

@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.note-tag {
  width: 175px;
  min-width: 0px;
  flex-grow: 1;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    white-space: nowrap;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
}

<div class="card">
  <div class="card-content">
    <div>
      <div class="row">
        <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
        <div>
          <div class="row">
            <div class="note-tags-list">
              <p class="tag note-tag">crunchy</p>
              <p class="tag note-tag">recipe</p>
              <p class="tag note-tag">carrot</p>
            </div>
            <p id="text-that-should-stay">I stay</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

编辑 - 根据您的

so actually, the excess width is coming from the `#blank-tag`. You set its width to `30px`. If you remove it / change its width to 0, it will solve your problem. Otherwise, there will always be a 30px gap.

“粉红色”宽度

与您的元素宽度无关；当您使用flexbox时，Chrome DevTools表示元素的位置。您可以（并且应该！）阅读更多在这里。
您可以通过更改DevTool中的div的宽度来自行检查它（如您添加的图片所示），并且您会发现显示器不会发生变化。

SECOND EDIT

I might not get you right, but there is no extra width when you remove the blank tag.

If you are talking about the gap between node-title and note-tags-list, it derives from flex-grow: 0;, which is the default for flex items. You can add to .tag the flex-grow property as flex-grow: 1; and it will make your tags grow to the maximum space they can get.

@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.note-tag {
  width: 175px;
  min-width: 0px;
  flex-grow: 1;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    white-space: nowrap;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
}

<div class="card">
  <div class="card-content">
    <div>
      <div class="row">
        <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
        <div>
          <div class="row">
            <div class="note-tags-list">
              <p class="tag note-tag">crunchy</p>
              <p class="tag note-tag">recipe</p>
              <p class="tag note-tag">carrot</p>
            </div>
            <p id="text-that-should-stay">I stay</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

EDIT - based on your comments

the

"pink" width

It is not related to the width of your elements; it's how chrome devtools represent the position of your elements when you use flexbox. You can (and should!) read more here.
You can check it yourself by changing the width of the div in the devtools to 202px (as seen in the picture you added), and you'll see there will be no change in the display.

回复收藏 0 原文

帅的被狗咬 2025-02-01 17:16:59

它是因为flex-flow：row wrap;

要澄清， flex-flow wrap wrap是.note-tags-list，当该空间不足以显示其中的项目（酥脆|食谱|胡萝卜），垂直上，垂直放置的项目不可见，因为其父母的高度固定高。

答案是删除flex-flow：row wrap;
请参阅这个小提琴fork

回复收藏 0 原文

眼眸印温柔 2025-02-01 17:16:59

您如何看待这个答案？我只稍微更改了HTML代码。
我更改的最小宽度。现在...

我想要div包含溢出元素的宽度仅为非包裹元素的大小。

正在工作

@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px dashed blue;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.tags-list{
  display: flex;
  justify-content: flex-end;
  border: 2px dashed green;
}
.note-tag {
  min-width: 175px;
  flex-grow: 1;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    gap: 5px;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
    border: 1px dashed red;
}

<div class="card">
  <div class="card-content">
    <div>
      <div class="row">
        <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
          <div class="tags-list">
            <div class="note-tags-list">
              <p class="tag note-tag">crunchy</p>
              <p class="tag note-tag">recipe</p>
              <p class="tag note-tag">carrot</p>
            </div>
            <p id="text-that-should-stay">I stay</p>
          </div>
      </div>
    </div>
  </div>
</div>

what do you think about this answer? i only slightly changed the HTML codes.
i change the min-width of .note-tag and set a flex-grow for it.
and now ...

I want the width of the div containing the overflow elements to be just the size of the nonwrapped elements.

is working

@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px dashed blue;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.tags-list{
  display: flex;
  justify-content: flex-end;
  border: 2px dashed green;
}
.note-tag {
  min-width: 175px;
  flex-grow: 1;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    gap: 5px;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
    border: 1px dashed red;
}

<div class="card">
  <div class="card-content">
    <div>
      <div class="row">
        <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
          <div class="tags-list">
            <div class="note-tags-list">
              <p class="tag note-tag">crunchy</p>
              <p class="tag note-tag">recipe</p>
              <p class="tag note-tag">carrot</p>
            </div>
            <p id="text-that-should-stay">I stay</p>
          </div>
      </div>
    </div>
  </div>
</div>

回复收藏 0 原文

~没有更多了~