Question

我有一个使用Javascript重新调整大小的侧边栏。问题是当侧边栏的尺寸小于内容的包裹发生时。（我认为因为弹性盒）。

我的网格基于Rows和Columns，有点像Bootstrap。

<html>

<head></head>

<body>

    <h1>{{title}}</h1>
    <p>{{body}}</p>

    {{#each list}}
    <ul>
        <li>{{@index}}. {{this}}</li>
    </ul>
    </br>
    {{{htmlTag}}} 

    {{#if user.admin}}
    <button class="launch">Launch Spacecraft</button> {{else}}
    <button class="login"> Log in</button> 
    {{/if}} 
    {{!-- This is a comment --}}

</body>
</html>

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

这是fiddle以及我迄今取得的成就。

Answer 1

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

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

为了便于理解我的意思，我创建了一个margin: 0 -1rem;类，并将其添加到该链中的所有元素。

注意，我还从row类中移除了负余量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); });，否则无法看到省略号。

Updated fiddle

Stack snippet

* {
  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>

scrollBehavior

Answer 2

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

例如

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会帮助你。

Answer 3

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

＆＃13;

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

＆＃13;

这将帮助您使用＆＃34; ...＆＃34;

进行文本截断

防止在CSS Flexbox中包装

3 个答案: