Подогнать текстовое содержимое с помощью многоточия

Question

У меня есть и HTML контейнер вроде

<div class="container">
  <p>
    <span>short text width random length comes here</span>
    <a>postedByUserName</a>
  </p>
</div>

контейнер должен быть отзывчивым, здесь есть рабочая демонстрация

var $input = $('.input input'),
$container = $('.container'),
$value = $('.value');
$value.text('Container width: ' + $input.val() + 'px');
$container.width($input.val()); 

$input.on('input', function(){
 $container.width($input.val());  
    $value.text('Container width: ' + $input.val() + 'px');
});

.main{
  width: 100%;
  height: 100%;
  background: bisque;
  padding: 5px;
}
.container {
  overflow: hidden;
  max-height: 80px;
  padding: 0;
}
  p {
    background: orange;
    max-width: 100%;
    max-height: 100%;
  }
    a {
      color: blue;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <div class="input">
  Min. 50px
    <input type="range" min="50" max="600" step="10" name="container_width">
    Max: 600px
    <br/>
    <div class="value"></div>
    <br/>
  </div>
  <div class="container">
    <p>
      <span>Some random text comes here</span>
      <a>postedByUserName</a>
    </p>
  </div>
</div>

если вы установите ширину контейнера в 100 пикселей (можно использовать ввод диапазона), вы увидите, что элемент ссылки с именем пользователя больше не виден. Как можно сделать так, чтобы не помещать ссылку на следующую строку, а показывать элемент текста непрерывно и показывать имя пользователя с многоточием, это должно происходить только тогда, когда высота контейнера составляет 80 пикселей, до тех пор, пока многоточие не будет применено к тексту. Шаблон внутри div.container можно изменить, но имя пользователя должно выглядеть как ссылка и должно быть элементом, активируемым кликом? Мне нужно решение CSS+HTML.

Answer 1

Добавьте ниже код к вашему p,

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

Объяснение:

1. overflow: hidden;: Скрывает символы за пределами указанной ширины.
2. white-space: nowrap; Скажите браузеру, чтобы он не разбивал текст на несколько строк.
3. text-overflow: ellipsis;: Создает многоточие при переполнении текста.

---

Обновлен фрагмент:

var $input = $('.input input'),
  $container = $('.container'),
  $value = $('.value');
$value.text('Container width: ' + $input.val() + 'px');
$container.width($input.val());

$input.on('input', function() {
  $container.width($input.val());
  $value.text('Container width: ' + $input.val() + 'px');
});

.main {
  width: 100%;
  height: 100%;
  background: bisque;
  padding: 5px;
}
.container {
  overflow: hidden;
  max-height: 80px;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p {
  background: orange;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <div class="input">
    Min. 50px
    <input type="range" min="50" max="600" step="10" name="container_width">Max: 600px
    <br/>
    <div class="value"></div>
    <br/>
  </div>
  <div class="container">
    <p>
      <span>Some random text comes here</span>
      <a>postedByUserName</a>
    </p>
  </div>
</div>

Answer 2

Я играл в ваш код. Пожалуйста, попробуйте проверить это немного так,

<div class="container" style="text-overflow: ellipsis; width: 190px; white-space: nowrap; overflow: hidden;">
  <div style="text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden;">
    <span>Some random text comes here</span>
    <a>postedByUserName</a>
  </div>
</div>