Как сделать так, чтобы текст читался только в одной строке

Question

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

например, "это тот ... читать дальше".

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

Если ширина меньше, текст должен иметь автоматический размер и может быть менее 12 символов. например: «это ... читать дальше».

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

Что я ' До сих пор мне удалось выяснить, что я могу поместить div таким образом, чтобы он оставался в одной строке, если текст достаточно короткий:

<div style="display: inline-block; white-space: nowrap;">
<span>this is a test text</span>
</div>
<div>
<span>read more</span>
</div>

Любая помощь или вклад очень важны, спасибо.

Answer 1

Вы должны добавить ширину или максимальную ширину, если это возможно.

Вариант 1:

.preview{
  display: inline-block;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more{
  display: inline-block;
  overflow: hidden;
}

<div>
  <span class="preview">this is a test text</span>
  <span class="more">read more</span>
</div>

Вариант 2:

Используйте псевдоэлемент после :

.container::after{
  content: 'read more';
  display: inline-block;
  overflow: hidden;
}

.preview{
  display: inline-block;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  <span class="preview">this is a test text</span>
</div>

Вариант 3:

Попробуйте:

display: flex;
flex-direction: row;

Надеюсь, это поможет!

Бонус :

Вы можете использовать ch в качестве ширины, которая является «символьной единицей».

Предварительная мера (ширина) глифа «0» шрифта элемента , Источник

Пример:

width: 12ch;