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

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

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 3

这是文本“ Chennai，孟买，浦那，班加罗尔”没有空格的问题。如果有空间，那么div外的tex就会溢出

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

Answer 4

尝试以下html作为定位标记，通过检查数组长度来操纵内容：

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

输出

Answer 5

我会结合使用溢出，溢出包装和空格来使文本正确中断。

然后，我将使用一个伪元素来在容器之后呈现项目计数。通过绝对放置，我们可以相对于容器对齐该元素，而不管我们向容器中添加了多少个额外节点。

由于使用了伪元素，因此可以轻松使用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 6

如果有帮助，可以使用断字属性将一个简单的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;
}

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

6 个答案: