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

Question

[IvanKalinin]

Всем доброго времени.

Столкнулся с такой проблемой. Есть абсолютно спозиционированный текст (который в будущем будет появляться на hover), своего рода тултип. Он может быть 1 слово, а можно состоять из нескольких строк. Но его максимальная ширина не должна превышать 160px; Т.е. Ширина динамическая, зависимая от контента, но ограниченная 160px;

Не могу сообразить, почему в этом блоке каждое слово пишется с новой строки? Как заставить его занимать 160px и только потом переносить слова на новую строку?

<div>
  Lorem ipsum.
  <span>Lorem ipsum dolor sit amet.</span>
 </div>

div {
  position: relative;
  display: inline-block;
}

span {
  position: absolute;
  top: 0;
  left: 100%;
  border: 1px solid #000;
  padding: 8px;
  max-width: 160px;
}

https://jsfiddle.net/To_wave/ceuto1qo/

Answer 1

[Евгений Вольф]

Я думаю, что вот так. Других способов "с ходу" в голову не приходит.

P.S. Как видите, в первом случае блок занимает столько, сколько его контент. Во втором случае - не более 160px.

Answer 2

[Nik]

если нужно 160px то

div {
min-width: 160px;
}

Comments

[IvanKalinin]

нужно максимум 160. А минимум - ширина одного символа.

Answer 3

[simka alien]

https://jsfiddle.net/ceuto1qo/3/
т.е __для текста в абсолютном блоке запретить перенос строк и убрать фиксированную ширину

Comments

[IvanKalinin]

В этом случае мне недоступен текст в несколько строк