CSS Разместить текст по разным сторонам блока?

Question

Есть вот такой простой пример

body {
  margin: 0;
}

h1 {
  font-size: 15vh;
  width: 30vw;
  text-align: justify;
  margin: 1vh 0;
}

<h1>Text1 Text2Long</h1>

Вопрос — Есть ли возможность какими-то СSS свойствами сделать так, что б слова растягивались на всю допустимую ширину блока? Что б если в теге два слова, что б первое всегда было слева, а второе справа. БЕЗ добавления сторонних тегов в html разметку.

text-align: justify; Работает, как-то не так как предполагал.

Вот так хочу что б вышло в конце. Рамкой показываю область блока. Ширина блока может динамически меняться. Аналог свойства justify-content: space-between но для текствого поля... Количество слов не важно.

Answer 1

h1 {
  text-align: justify;
  text-align-last: justify;
  border: 5px solid red;
  animation: abc 2.5s infinite;
  height: 4em;
}

@keyframes abc{
0%{width: 1%;}
50%{width: 100%;}
to{width: 1%;}
}

<h1>так пойдёт?</h1>

Answer 2

Не уверен можно ли задать такие свойства тексту, но если их преобразовать в блоки, то получиться как-то так:

html,
body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  height: 100%;
}

.string {
  display: grid;
  height: 100vh;
}

h1 {
  font-size: 15vh;
  width: 30vw;
  margin: 1vh 0;
}

.stroka_1 {
  justify-self: start;
}

.stroka_2 {
  justify-self: end;
  align-self: end;
}

<div class="string">
  <h1 class="stroka_1">Text1</h1>
  <h1 class="stroka_2">Text2Long</h1>
</div>

P.S. Перенес второй текст в "новый" h1

БЛОГ НА HUSL

CSS Разместить текст по разным сторонам блока?

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