溢出隱藏不會削減文本

Question

我有以下的HTML和CSS

<div id="car-76" class="thumbnail_car thumbnail span2"> 
    <div class="thumbnail_creator"> 
     <hr> 
     <div class="creator_img"> 
      <img alt="Bob Smith" height="40x40" src="http://www.gravatar.com/avatar/df61dcc6eec08cb7d62f1959b89ae843?s=40&d=identicon&r=PG" width="40x40"> 
     </div> 
     <div class="creator_details"> <a href="https://stackoverflow.com/users/2" title="John Malkovitchlongname the 3rd"> 
         John Malkovitchlongname the 3rd 
</a> 
     </div> 
     <div class="creator_followers"> <a href="https://stackoverflow.com/users/2/followers"><i class=" icon-eye-open" title="Followers"> </i></a> 0</div> 
     <div class="thumbnail_follow" id="follow_btn-2"> <a class="btn btn-primary" data-method="post" data-remote="true" rel="nofollow">Follow</a> 

     </div> 
    </div> 
</div> 

相關CSS是

.thumbnail_creator .creator_details { 
    display: inline-block; 
    font-size: 77%; 
    position: absolute; 
    left: 44px; 
    overflow: hidden; 
    text-overflow: clip; 
} 

我想長名稱股利，而不是進入一個新行

出於某種原因做overflow: hidden隱藏文字和text-overflow: clip夾文本不會做任何事情

這樣，而不是：

我希望它（編輯此名稱達到的結果後）

fiddle here

Answer 1

你可以嘗試添加：

white-space:nowrap; 

並設置一些寬度的內容，因爲你有一個固定的縮略圖寬度，這不應該是一個問題，對不對？

看到DEMO

希望它可以幫助^ _^

更新：

• 之前我錯過了你的小提琴，所以我做了一個對我的演示。這裏是你的fiddle updated的演示。在這裏，我還添加了allipsis退房=）

Answer 2

也可以嘗試，並設置.thumbnail_creator .creator_details的div的max-width CSS屬性。