防止在 CSS Flexbox 中换行

Question

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

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

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

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

我想实现的是把内容截断（不缩水）表示多了

这是 fiddle 我目前所取得的成就。

Answer 1

您需要在媒体查询中或根据您的需要使用文本溢出属性和其他属性。

例如

.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>

希望这对您有所帮助。

Answer 2

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

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

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

Answer 3

当涉及到 Flexbox 时，您需要设置 min-width: 0 或 overflow: hidden 到每一层，从具有宽度约束的元素的 child 到具有宽度约束的元素省略号。

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

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

注意，我还从 row class 中删除了负边距 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>

防止在 CSS Flexbox 中换行

Prevent wrapping in CSS Flexbox

html

css

flexbox

ellipsis