Как с помощью CSS задать обрезание нескольких слов строке?

Question

Есть две пары: имя и фамилия, например
Сигизмунд Игнатов - Мария Самойлова

Требуется при уменьшении ширины div, который содержит полный текст, выполнить следующие действия:

ничего не должно переноситься на новую строку
сначала обрезались бы фамилии до некоторой минимальной длины:
Сигизмунлд Игнатов - Мария Самойл...
затем обрезалось бы длинное имя:
Сигиз... Игн... - Мария Сам...
и наконец оба имени и фамилии:
Сиг... Игн... - Мар... Сам...

Можно ли реализовать такое средствами CSS?

Answer 1

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

.block {
  overflow: hidden;
  border: 2px solid red;
  background-color: black;
  color: white;
  padding: 10px;
  font-size: 20px;
}

.trim {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="block">
  <span>лалала квадрат ромб треугольник ракета</span>
  <div class="trim">Cупер большой текст Cупер большой текст Cупер большой текст Cупер большой текст Cупер большой текст Cупер большой текст</div>
</div>

Answer 2

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

.resize {
  display: inline-block;
  max-width: 100%;
  border: 1px solid red;
  padding: .5em;
  overflow: hidden;
  resize: horizontal;
  box-sizing: border-box;
}

.text-overflow {
  display: inline-flex;
  flex-direction: row;
  max-width: 100%;
  white-space: nowrap;
}

.text-overflow > span:not(.sep) {
  display: inline-block;
  min-width: 6ch;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow > span:not(:last-child)::after {
  content: '\A0';
  display: inline;
}

<div class="resize">
  <div class="text-overflow">
    <span>Сигизмунд</span><span>Игнатов</span><span class="sep">-</span><span>Мария</span><span>Самойлова</span>
  </div>
</div>

БЛОГ НА HUSL

Как с помощью CSS задать обрезание нескольких слов строке?

Ответы (2 шт):