html - 防止 CSS Flexbox 中的换行

Question

我有一个使用 Javascript 的可调整大小的侧边栏。问题是当侧边栏的大小小于内容的换行时就会发生。 (我认为是因为 flex 盒)。

我的网格基于行和列，有点像 Bootstrap。

.column {
    flex-basis: 0;
    max-width: 100%;
    flex-grow: 1;
}

.row {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -1rem;
}

我想要实现的是截断内容(不缩小)以表明还有更多内容。

这是一个fiddle到目前为止我所取得的成就。

Answer 1

对于 Flexbox，您需要将 min-width: 0 或 overflow:hidden 设置到每个级别，从具有宽度的元素的子元素开始约束，对于有省略号的约束。

因此，在本例中，来自 sidebar 的子项，原因是 Flex 元素的 min-width 默认为 auto ，这意味着它不能小于其内容。

为了方便理解我的意思，我创建了一个 flex-ellipsis 类并将其添加到该链下的所有元素中。

注意，我还从 row 类中删除了负边距，margin: 0 -1rem;，否则看不到省略号.

Updated fiddle

堆栈片段

const resizeHandle = document.getElementsByClassName("vertical-resize")[0];
const navbar = document.getElementById('sidebar');

function resizeNavbar(e) {
  let size = (e.pageX + 5);

  navbar.style.width = (e.pageX + 5) + "px";
}

function removeEvents() {
  document.removeEventListener('mousemove', resizeNavbar);
  document.removeEventListener('mouseup', resizeNavbar);
}

resizeHandle.addEventListener('mousedown', () => {
  document.addEventListener('mousemove', resizeNavbar);
  document.addEventListener('mouseup', removeEvents);
});

* {
  user-select: none;
  color: #dadada;
}

.flex-ellipsis {
  min-width: 0;                          /*  added  */
  /* or overflow: hidden; */
}

p,
h6 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.rounded-circle {
  border-radius: 50% !important;
}

.no-margin {
  margin: 0 !important;
}

.column {
  flex-basis: 0;
  max-width: 100%;
  flex-grow: 1;
  background: #4a4a4a;
}

.column-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.row {
  display: flex;
  flex-wrap: nowrap; /*Even though no-wrap it still wraps as shown in picture.*/
  /*margin: 0 -1rem;*/
}

.custom {
  margin: auto;
  padding: 10px 0px;
  flex-wrap: nowrap;
}

.vertical-resize {
  position: relative;
  right: 0;
  top: 0;
  cursor: col-resize;
  width: 5px;
  background: aquamarine;
  height: 100vh;
}

<div class="row">
  <div id="sidebar" style="width: 570px;">
    <div class="align-items-center row custom flex-ellipsis" id="sidebar">
      <div style="max-width: 2.5rem;" class="column-1">
        <img class="rounded-circle" style="max-width: 28px; min-width: 28px;" alt="Avatar" src="https://d30y9cdsu7xlg0.cloudfront.net/png/138926-200.png">
      </div>
      <div class="column flex-ellipsis">
        <div class="row">
          <div class="column">
            <p class="no-margin">Ahmed Tarek</p>
          </div>
        </div>
        <div class="row flex-ellipsis">
          <div class="column flex-ellipsis">
            <h6 style="font-size: 11px;" class="no-margin">01 January, 0001</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="vertical-resize"></div>
  <div class="column">

  </div>
</div>