Как я могу избежать переноса текста во вложенной позиции: абсолютные элементы?

Question

В моем приложении есть два вложенных элемента position: absolute, а внутренний элемент содержит динамически загружаемый текст.

Проблема в том, что текст переносится по каждому слову, тогда как я бы предпочел, чтобы он не переносился вообще. Проблема в том, что inner является абсолютным и, следовательно, вне потока, поэтому вычисленная ширина outer равна 0, что означает, что текст выходит за пределы родительского элемента, поэтому он переносится.

Вот что происходит: https://jsfiddle.net/y9pLgzub/

И вот что я хочу, кроме как без явного определения размера: https://jsfiddle.net/pv2g3rwo/

Можно ли как-то поддерживать структуру HTML (два вложенных абсолютных делителя), но сделать так, чтобы текст в inner не переносился? В идеале внешний элемент должен увеличиваться в размере, чтобы соответствовать всему внутреннему элементу, несмотря на то, что он является «позицией: абсолют».

Answer 1

Поскольку .inner и .outer равны position: absolute, размер .outer не может увеличиваться в зависимости от дочернего элемента. Размеры должны быть четко указаны.

Что касается проблемы переноса слов. Вы можете попробовать white-space: nowrap;

.outer {
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid black;
}

.inner {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 1px solid red;
   white-space: nowrap;
}

<div class="outer">
  <div class="inner">
      asdf asdf
  </div>
</div>

Answer 2

Может быть, меньше - больше: при использовании отступа на внешней стороне вместо смещения внутренней, расчет должен быть примерно правильным:

.outer {
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid black;
  padding: 10px 0 0 10px;
}

.inner {
  border: 1px solid red;
}

<div class="outer">
  <div class="inner">
      asdf asdf
  </div>
</div>

https://jsfiddle.net/du2f8tsb/

Answer 3

Вы можете сделать это, включив whitespace: nowrap; в .inner{}