Span use max width before line break-CodePudding

I've got following setup:

.container1 {
  position: absolute;
  max-width: 300px
}

.container {
  position: absolute;
}

<div >
  <div >
    <span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim purus et arcu ultrices posuere. Quisque tempus elementum facilisis. Duis vitae enim eu erat elementum dapibus vitae ac eros. Pellentesque faucibus pretium leo in accumsan. Nulla ullamcorper mollis dolor, euismod.
    </span>
  </div>
</div>

For some reason I can't get the span to grow to the defined 300px max-width while breaking once the max-width is reached.

CodePudding user response：

Is applying position: absolute on container necessary?

When you use position: absolute without a parent element its positioned relative to, it will go out of the document flow. If you apply position: relative instead, the max-width behaviour will work as intended because its relative to the parent container container. By doing it like this, the element will stretch to full width (the max-width: 300px that you set) because its container doesnt have a specificed width

Read more about positioning values: https://developer.mozilla.org/en-US/docs/Web/CSS/position#types_of_positioning

.container1 {
  position: absolute;
  max-width: 300px;
}

.container {
  position: relative;
}

<div >
  <div >
    <span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim purus et arcu ultrices posuere. Quisque tempus elementum facilisis. Duis vitae enim eu erat elementum dapibus vitae ac eros. Pellentesque faucibus pretium leo in accumsan. Nulla ullamcorper mollis dolor, euismod.
    </span>
  </div>
</div>

CodePudding user response：

In such case, use a big negative margin

.container1 {
  position: absolute;
  max-width: 300px;
  margin-right:-100vmax
}

.container {
  position: absolute;
}

<div >
  <div >
    <span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim purus et arcu ultrices posuere. Quisque tempus elementum facilisis. Duis vitae enim eu erat elementum dapibus vitae ac eros. Pellentesque faucibus pretium leo in accumsan. Nulla ullamcorper mollis dolor, euismod.
    </span>
  </div>
</div>

Related to understand what is happening in your case: Why everything word-wrap inside an absolute element nested inside a float or inline-block element