Как добиться того же эффекта, что и перенос слов на абсолютно позиционированный текст?

Question

Я ищу способ архивации, аналогичный overflow-wrap: break-word; для текста с абсолютным позиционированием.

Вот демоверсия вопроса:

.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>

Спасибо за любые предложения

Answer 1

Будет ли word-break: break-word делать то, что вы хотите?Кажется.

.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>

Answer 2

Добавить эту недвижимость

word-break:break-all;

.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; */
  word-break:break-all;
}

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