How to archieve the same effect as word-break on absolute positioned text?

Question

I'm looking for a method to archieve the same as overflow-wrap: break-word; for absolute positioned text.

Here a demo of the issue:

.container {
  position: relative;
  width: 110px;
  height: 110px;
  border: 1px dashed red 
}

.text {
  position: absolute;
  bottom: 0;
  /* How to archive the same effect as following */
  /* overflow-wrap: break-word; */
}

<div class="container">
  <span class="text">loremipsumdoloremelit</span>
</div>

Thanks for any suggestions

Answer 1

Would word-break: break-word do what you'd like? It seems to.

.container {
  position: relative;
  width: 110px;
  height: 110px;
  border: 1px dashed red
}

.text {
  position: absolute;
  bottom: 0;
  
  word-break: break-word;
}

<div class="container">
  <span class="text">loremipsumdoloremelit</span>
</div>