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>

感谢您的任何建议

标签： htmlcssword-wrap

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>