内容溢出时如何使用css徽章限制div

Question

我遇到的情况是所选项目溢出 div。 但我已经设法用 css 属性包装了它。

如果内容宽度跨越父 div 以从图像 1 转换为图像 2，我现在计划放置一个 css 徽章：

.

<div class="list-view">
    <div class="item-box">
        <h4>select Cities</h4>
        <ul>
            <li *ngFor="let item of cityList" (click)="selectedCity(item)">{{item}}</li>
        </ul>
    </div>
</div>

我有来自此链接https://stackblitz.com/edit/angular-uatw5p 的示例代码。 我试图实现这一目标，但找不到方法。谁能告诉我如何实现这一目标？

Answer 1

根据您要显示的项目数对数组列表进行切片。我用了三个项目来展示。并从数组的总长度中减去三。使用 CSS 以您想要的方式对其进行格式化。

<div class="container-fluid">
  Cities
    <a *ngFor="let item of selectedItems.slice(0, 3)" href="javascript:void(0)">{{item}}</a>
   <div *ngIf="selectedItems.length > 3">+{{selectedItems.length - 3}}</div>
    <button (click)="selectedItems=[]">Reset</button>
</div>

上面会给你以下结果：

编辑： 将以下内容与另一个答案中提供的 CSS 一起使用：

<a href="javascript:void(0)" class="selection">
   <p>Cities {{selectedItems.length? ' : ' + selectedItems.slice(0, 3): '' }}</p>
  <span *ngIf="selectedItems.length > 3">+{{selectedItems.length - 3}}</span>
</a>

Answer 2

这是没有空格的文本“Chennai,Mumbai,Pune,Bangalore”的问题。如果有空间，就会有 div 外的 tex 溢出

如果您仍然需要基于文本溢出的徽章，您需要添加或删除基于 parentDiv.offsetWidth 和 textDiv.offsetWidth 的 css 类。 Css 将指示显示或隐藏徽章，包括文本的省略号。

Answer 3

为锚标签尝试以下html，通过检查数组长度来操作内容：

<a href="javascript:void(0)"> Cities {{selectedItems.length? (selectedItems.length < 3 ? ' : ' + selectedItems : ' : ' + selectedItems.slice(0,3) + '+' + (selectedItems.length-3) ): '' }}</a>

输出

Answer 4

我会结合使用溢出、溢出换行和空白来使文本正确中断。

然后我会使用一个伪元素来渲染容器之后的项目计数。 通过将其设置为绝对，我们可以将元素相对于容器对齐，无论我们向容器中添加了多少额外节点。

由于我们使用伪元素，我们可以很容易地使用content css 规则将HTML容器的data-items属性绑定为我们小计数器的内容。

最大的优势在于，通过绝对定位计数器，我们可以继续使用相对单位来定位其他所有内容，并且我们可以将计数器放置在任何我们想要的位置，包括将溢出设置回隐藏状态并使计数器与边框重叠。

const cities = [
  "amsterdam",
  "belize",
  "calcutta",
  "dortmund",
  "egmond aan zee",
  "frankfurt",
  "gotenburg"
];

const render_list = list => content => {
  const items = content.map( text => `<li>${ text }</li>` ).join( '' );
  list.innerHTML = items;
  return list;
};

const add_city = list => event => {
  const item = event.target;
  if ( event.target.nodeName === 'LI' ) {
    list.appendChild( item.cloneNode(true));
    list.setAttribute( 'data-items', list.childElementCount );
  }
};

const options = document.querySelector( '#options' );
const selections = document.querySelector( '#selections' );

options.addEventListener( 'click', add_city( selections ));

render_list( options )( cities );

#selections {
  background-color: steelblue;
  border: 1px solid grey;
  list-style: none;
  margin: 4px;
  max-width: 50%;
  min-height: 1.1em;
  overflow-wrap: break-word;
  position: relative;
  width: 50%;
}
#selections:after {
  background-color: white;
  border: 1px solid grey;
  content: '+' attr(data-items);
  position: absolute;
  left: 100%;
  top: -1px;
}
#selections > li {
  display: inline;
  margin-left: 2px;
}
#options {
  border: 1px solid grey;
  margin-top: 20px;
}

<ul data-items="0" id="selections"></ul>
<ul id="options"></ul>

Answer 5

我会省略文本以始终为徽章留出空间：

p {
    display:block;
    text-overflow: ellipsis; /* will make [...] at the end of only ONE LINE!*/
    -webkit-line-clamp: 2; // experimental only! would allow ellipsis on 2nd line
    width: 370px; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
}

Answer 6

如果有帮助，使用 word-break 属性将一个简单的 css 修复为 overflow-wrap: break-word;

a{
  text-decoration: none;
  color: black;
  background: skyblue;
  display: block;
  width: 20em;
  margin: 20px auto;
  padding: 1.2em;
  font-size: 18px;
  max-width: 16em;
  overflow-wrap: break-word;
}