Question

我试图模仿类似Facebook的布局，其中左侧是个人档案图片，右侧是名称和标语。问题是我试图使它成为半流体布局，并且在小屏幕尺寸（或长标语/名称）下，文本可能需要被截断。

问题在于，在不丢失浮子或流体尺寸的情况下，我无法获得褶皱溢出。

<div style="-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;float:left;width: 105px;height: 105px; padding: 5px 5px 0 0;border-radius:0 7px 0 0;background-color:#fff; margin:-50px 10px 0 0;z-index:100;position:relative;">
    <img src="" alt="" style="width: 100px;height:100px;margin:0;padding:0;border-radius:0 5px 0 0;">
</div>
<div style="width:100%;text-overflow: ellipsis;">
    <h2 style="text-align:left;margin:0;">John Jacob Smith</h2>
    <p style="text-align:left;margin:0;white-space:nowrap;">
        This is a potentially very long tagline that I want to dynamically truncate with ellipsis.
    </p>
</div>

我的代码链接在这里：http://jsfiddle.net/GxvLa/

Answer 1

尝试使用overflow:hidden作为标语。不过，目前还不清楚你想要截断它。包含div是100％。

Answer 2

overflow: hidden上需要<p>。 Like this：

#desc p {
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div中的省略号，宽度由float控制

2 个答案: