Как ограничить div значком css при переполнении контента

Question

У меня есть сценарий, когда выбранные элементы переполняют div. Но мне удалось обернуть его свойствами css.

Теперь я планирую поместить значок CSS, если ширина содержимого пересекает родительский div для преобразования из изображения 1 в изображение 2:

.

<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

Я бы использовал комбинацию overflow, overflow-wrap и white-space для правильного разбиения текста.

Тогда я бы использовал псевдоэлемент для визуализации количества элементов после контейнера.Ставя его абсолютным, мы можем выровнять элемент относительно контейнера, независимо от того, сколько дополнительных узлов мы добавляем в контейнер.

Поскольку мы используем псевдоэлемент, мы можем легко использовать content cssПравило связывать атрибут data-items контейнера HTML как содержимое нашего маленького счетчика.

Большое преимущество в том, что, позиционируя счетчик абсолютно, мы можем продолжать использовать относительные единицы для позиционирования всего остального, и мы можемразместите счетчик в любом месте, в котором мы захотим, в том числе снова поместив переполнение на скрытый, и сделайте так, чтобы счетчик перекрывал границу.

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 2

Попробуйте следующий html для тега привязки, управляйте содержимым, проверив длину массива:

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

выход

Answer 3

Это проблема с текстом «Ченнаи, Мумбаи, Пуна, Бангалор» без пробелов.Если есть место, будет переполнение текста за пределами div

Если вам все еще требуется значок, основанный на переполнении текста, вам необходимо добавить или удалить класс css на основе parentDiv.offsetWidth и textDiv.offsetWidth.Css диктует показать или скрыть значок, включая многоточие текста.

Answer 4

Я бы сделал многоточие текста, чтобы всегда оставалось место для значка:

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 5

Нарезать список массивов для количества элементов, которые вы хотите отобразить. Я использовал три элемента для отображения. И минус три от общей длины массива. Используйте 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>

Выше приведен следующий результат:

Edit: Используйте следующее с 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 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;
}