CODEWITHSUNDEEP
htmlcsslayout
Leeker
Leeker

Reputation: 35

Why does absolute positioning wrap each word on a new line? And how to fix it?

Why is every word in a child element (class .second) with absolute positioning wrapped on a new line? How can I make the parent element (class .first) stay the same shape (round), but at the same time, the child element is lower and centered relative to the parent and has an infinite width?

.first {
  top: 12px;
  left: 100px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  margin: 2px;
  background-color: blue;
  color: blue;
}

.second {
  position: absolute;
  width: auto;
  left: 50%;
  transform: translate(-50%);
}
<div class="first">
  <div class="second">test test test</div>
</div>

Upvotes: 0

Views: 33

Answers (3)

erfan ns
erfan ns

Reputation: 97

use white-space: nowrap;

.first {
  top: 12px;
  left: 100px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  margin: 2px;
  background-color: blue;
  color: blue;
}

.second {
  position: absolute;
  width: auto;
  left: 50%;
  transform: translate(-50%);
  white-space: nowrap;
}
<div class="first">
  <div class="second">test test test</div>
</div>

Upvotes: 1

David Pavlicko
David Pavlicko

Reputation: 1

you need to put a min-width on your second class. because you have 'auto' set to the width, it defaults to the size of the holding container, which is only 8px

Upvotes: 0

user6078346
user6078346

Reputation:

.first has a width of 8px, trying to fit the words into it makes then wrap.

Upvotes: 0

Related Questions