溢出隐藏不会削减文字

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="/users/2" title="John Malkovitchlongname the 3rd">
                       John Malkovitchlongname the 3rd
</a> 
        </div>
        <div class="creator_followers"> <a href="/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;
}

如果到达div的末尾，我想要删除长名称，而不是输入新行

由于某种原因，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属性。