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

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/