如何在沒有寬度和溢出的容器中打破長字符串的文本自動

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/