如何在没有宽度和溢出自动的容器中打破长字符串文本

Question

我有一个填充列表项的通知窗口（它可以没有列表项或很多列表项。）

我遇到长文本字符串的问题，但由于其容器上没有宽度，我不确定最好的方法来打破它们。

我尝试使用word-wrap: break-word;和max-width，但我发现的问题是，当列表项很少时，滚动条会消失（如预期的那样），留下空格。

任何想法都会很棒......提前感谢

HTML

<ul class="container">

  <li id="" class="notification-item">
    <a href="#">
      <div class="notification">
        <img src="http://placehold.it/30x30" id="imgProfileasset" alt="user image" class="user-image-small border" height="30" width="30">
        <h2 class="sr-only">New Thread Post</h2>
        <p>lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text</p>
        <i class="icon-file"></i>
        <time class="timeago" datetime="2015-10-19T07:30:16.710+00:00" title="19/10/2015 08:30">41 minutes ago</time>
      </div>
    </a>
    <ul class="unstyled admin">
      <li><a style="cursor: default;" href="#" class="notification-read-btn" data-placement="top" rel="tooltip" data-original-title="notification read"><i class="icon-ok"></i> Icon</a></li>
      <li><a href="#" class="notification-options-btn" data-placement="top" rel="tooltip" data-original-title="Options"><i class="icon-cog"></i> Icon</a></li>
    </ul>
  </li>
</ul>

CSS

ul li {
  list-style: none;
}

ul.container {
  padding: 10px;
  width: 380px;
  min-height: 100px;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid red;
  background: white;
}

.notification {
  margin: 0px 20px 0px 55px;
}

.notification-item {
  position: relative;
}

.notification-item img {
  position: absolute;
  left: 0px;
  word-wrap:break-word;

}

.admin {
  position: absolute;
  top: 0px;
  right: 0px;
}

https://jsfiddle.net/haguem/9xv6nk4o/1/

Answer 1

只需将此行添加到css：

 .notification p {
     word-break: break-all;
 }

看到它正常工作：

https://jsfiddle.net/9xv6nk4o/3/