防止在 CSS Flexbox 中换行答案

【问题标题】：Prevent wrapping in CSS Flexbox防止在 CSS Flexbox 中换行
【发布时间】：2018-04-28 06:21:24
【问题描述】：

我有一个使用 Javascript 的可调整大小的侧边栏。问题是当侧边栏的大小小于内容的换行时。（我认为是因为 flex-box）。

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

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

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

我想要实现的是截断内容（不缩小），表明还有更多内容。

这是一个fiddle，上面有我目前所取得的成就。

【问题讨论】：

标签： html css flexbox ellipsis

【解决方案1】：

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

所以在这种情况下，来自sidebar 的孩子，原因是弹性项目的min-width 默认为auto，这意味着它不能小于其内容。

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

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

Updated fiddle

堆栈sn-p

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>

【讨论】：

就是这样！非常感谢您提供如此详细的答案。 +1

【解决方案2】：

您需要在媒体查询中或根据您的需要使用 text-overflow 属性以及其他属性。

例如

.list {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 48px; /* just for test */
}

<div class="list">
  this is a ver long list this is a ver long list this is a ver long list.
</div>

希望这对您有所帮助。

【讨论】：

+1 for the white-space nowrap 这实际上非常接近工作，除了由于某种原因我没有从文本溢出中获得所需的...。
你在sn-p中看不到吗？或在您的页面中？你可以投票支持 +1 :)
它在 sn-p 中有效，但在我的代码中却没有。到目前为止，它只是防止了与我想要的非常接近的空白包装。请查看更新后的问题并提供更多解释。
你也在使用overflow属性吗？
是的......我正在尝试把小提琴放在一起，但它有点难。

【解决方案3】：

由于您尚未与我们共享完整代码，我们将很难为您提供有效的解决方案。但是您可以将此 css 添加到您想要截断的代码中。

width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

这将帮助您用“...”截断文本

【讨论】：