文本不换行（div 标签在标签内，反之亦然）

Question

<ul class="dropdown-menu">
  <li>
      <div class="notification">A really long message blah blah blah this is a really long message loreum lipsum loreum lipsum stuff and yeah you get the point.</div>
  </li>
</ul>

以上作品（文字换行）

<ul class="dropdown-menu">
  <li>
      <a href="#"><div class="notification">A really long message blah blah blah this is a really long message loreum lipsum loreum lipsum stuff and yeah you get the point.</div></a>
  </li>
</ul>

上面 div 中的文本不断越过 div 的边界，并且离开了我添加样式 "x-overflow: hidden" 的页面，现在它隐藏了文本，我可以滚动看到这一切。但我希望文本像往常一样换行。

jsfiddle

Answer 1

尝试在 div

中使用 word-wrap: break-word;

.notification {
    word-wrap: break-word;
}

Answer 2

你应该可以通过以下方式做到这一点。

.notification {
  white-space: pre-wrap;
}