Как добавить круг в верхнем правом углу div и показать многоточие с переполнением текста

Я хочу показать список динамически добавляемого элемента после добавления в div с помощью jquery. Я хочу, чтобы максимальная ширина div составляла только 400 пикселей. и он должен иметь многоточие с text-overflow: hidden. В правом верхнем углу div будет значок.

Но при использовании text-overflow: hidden кружок тоже скрывается.

В настоящее время я получаю:

Но правильно он должен отображаться как:

Как добавить круг в верхнем правом углу div и показать многоточие с переполнением текста

function buttonClick() {
  var inputValue = $("#inputField").val();

  $(".fileContent").append(
    '<div id = "fileList" class = "fileName-label">' +
    inputValue +
    '  <div class = "badge"><a href = "#"  class = "close">X</a></div></div>'
  );

  $("#inputField").val(" ");
}

.fileName-label {
  position: relative;
  display: inline;
  padding: .50rem 0.40rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
  background-color: #f0ad4e;
}

.fileContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  /* position: absolute; */
}

.fileContent #fileList {
  margin-top: 0.70rem;
  text-overflow: ellipsis;
  overflow: hidden;
  width: auto;
  min-width: 0;
  max-width: 400px;
}

.badge {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -10px;
  right: -15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  padding: 2px;
  background-color: #FF4081;
  font-size: 75%;
}

.badge :hover {
  background-color: #fc1463;
}

.close {
  color: #fff;
  text-decoration: none;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type = "text" id = "inputField" />
<input type = "button" value = "Click" onclick = "buttonClick();return false;" />

<div class = "fileContent">
</div>

Почему бы не поставить диапазон для входного значения и добавить к нему text-overflow: hidden?

— 30.03.2021 11:52

а что насчет многоточия?

— 30.03.2021 11:56

Я имел в виду добавить это в диапазон text-overflow: ellipsis; overflow: hidden; вместо div

— 30.03.2021 12:04

@GowthamRajJ, ваше решение не работает, вы пробовали сначала проверить себя?

— 30.03.2021 12:06

Подходит ли вам ответ от BOZ?

— 30.03.2021 12:07

@AakashBashyal Мое плохое предложение обернуть его с помощью диапазона, переполнение текста работает с блочным элементом, необходимо обернуть его в div вместо диапазона или добавить блок display: с этими двумя свойствами css. И BOZ добавил ответ.

— 30.03.2021 12:16

html jquery css

30.03.2021 11:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

function buttonClick() {

  var inputValue = $("#inputField").val();

  $('.fileContent').append('<div id = "fileList" class = "fileName-label"><div class = "text">' + inputValue + '  </div><div class = "badge"><a href = "#"  class = "close">X</a></div></div>');

  $("#inputField").val(" ")

}

.fileName-label {
  position: relative;
}

.fileName-label .text {
  padding: .50rem 0.40rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: baseline;
  border-radius: 0.25em;
  background-color: #f0ad4e;
  margin-top: 0.70rem;
  width: auto;
  min-width: 0;
  max-width: 400px;
}

.fileContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  /* position: absolute; */
}

.badge {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -10px;
  right: -15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  padding: 2px;
  background-color: #FF4081;
  font-size: 75%;
}

.badge :hover {
  background-color: #fc1463;
}

.close {
  color: #fff;
  text-decoration: none;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type = "text" id = "inputField" value = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." />
<input type = "button" value = "Click" onclick = "buttonClick();return false;" />

<div class = "fileContent">
</div>

Похоже, это работает.

— 30.03.2021 12:06

30.03.2021 12:02