Flex span автоматическая ширина, если строка переносится?

Question

[Илья]

Если span в flex переносится на вторую строку, ширина становится 100%, как задать автоматическую ширину?

Пример:

<div>
  <span>1234567890 1234</span>
</div>

div{
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
}
span{
  background: green;
}

Результат:


А нужно что бы span был не на всю ширину, а по размеру текста и сам текст был по левой стороне, вот так:


Но при этом не задавая ширину span заранее

Answer 1

[Ankhena]

Вот так https://jsfiddle.net/wx6mg2mj/
Только не понятно зачем флекс

Comments

[Илья]

Смысл в том что бы span был по центру, относительно dev, но текст внутри span был по левому краю относительно span

[Илья]

В вашем примере нет центрирования span

[Ankhena]

Илья, я и говорю не понятно зачем флекс
https://jsfiddle.net/gsukrbkf/

[Илья]

Ankhena, вы считаете что сделаешь лучше использовать просто absolute с центрированием через translate ?

[Ankhena]

Илья, я считаю, что так работает, а с флексом нет.

[Илья]

Ankhena, работает ,но не полноценно, текст не может занять 100% от блока, а всего 50% по ширине

[Ankhena]

Илья, что?

[Илья]

Ankhena, div относительно main, занимает максимум 50% ширины, а должен иметь возможность занимать до 100%
joxi.ru/p27xvLT04gkdA7.jpg

[Ankhena]

Илья, тяжелый случай https://jsfiddle.net/wcqkt1ou/
На какую ширину самая длинная строка/слово на такую и растянется

[Илья]

Ankhena, обычно строка не переносится ( https://jsfiddle.net/zegudv2g/4/ ), пока не заполнит полностью родителя ( https://jsfiddle.net/zegudv2g/5/ ), но в вашем примере строка почему то переносится по максимальному слову (как вы говорите), хотя это не всегда так, вот тут например максимальное слово 1 символ, но строка не переносится ( https://jsfiddle.net/wcqkt1ou/5/ ). Я был бы очень благодарен, если бы вы рассказали где можно по этому поводу почитать, почему это так происходит. Но мне нужно что бы строка заполняла полностью родителя, а потом только переносилась, как обычно это и происходит.

[Ankhena]

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

Но мне нужно что бы строка заполняла полностью родителя, а потом только переносилась, как обычно это и происходит.

Считайте на JS. Если тест в одну строчку помещается, то по центру, если нет, то по левому краю. Но там тоже будут сложности из-за длины слов/строк. При достаточно длинном тексте, чтобы он занимал много строк все эти нюансы перестанут быть заметными.

Answer 2

[Игорь Мясников]

Обернуть span еще одним дивом например
Пример

Comments

[Илья]

Нужно что бы текст был по левой стороне (обновил вопрос)

[Игорь Мясников]

Илья, 2 spana и каждому text-align:left