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

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 >
  <div >test test test</div>
</div>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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 >
  <div >test test test</div>
</div>