html - 如何在绝对定位的文本上实现与分词相同的效果？

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>