Inline text in absolute position

Question

I am trying to display text contained in a div which has a position: absolute; on only one line.

The parent is position:relative; and the width of the parent might be smaller than the div containing the text.

I would like the text of my position: absolute; div staying on one line, how could I achieve that? For the moment, the maximum width of the div is the width of the parent.

Here is a jsfiddle I made to explain the problem: https://jsfiddle.net/El_Matella/fb15mq68/

Thanks a lot for your help :)

Answer 1

You can prevent text wrapping with the white-space property:

• white-space: nowrap

  Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

• white-space: pre

  Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.

Probably, you want the first one.

.box {
  white-space: nowrap;
}

.container {
  background: pink;
  width: 100px;
  height: 100px;
  margin: auto;
  position: relative;
}
.box {
  position: absolute;
  right: 0;
  background: green;
  top: 100%;
  white-space: nowrap;
}

<div class="container">
  <div class="box">
    This is the text I want to display inline
  </div>
</div>