在div中的省略号，宽度由浮点控制

我想模拟一个类似Facebook的布局，其中一张个人资料图片向左漂移，一个名称和标语向右。问题是，我正在尝试使其成为半流体布局，并且在小屏幕尺寸（或长标语/名称）时，文本可能需要被截断。在div中的省略号，宽度由浮点控制

问题是我不能得到一个elipsis溢出而不会失去我的浮动或我的流体大小。

<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/

来源

2014-07-07 Greg Schoppe

您需要overflow: hidden在您的<p>。 Like this：

来源

2014-07-07 20:12:11

就是这样！我没有理由错过它，但我假设我需要明确设置元素的宽度！ –

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

来源

2014-07-07 19:47:02 moomin

在div中的省略号，宽度由浮点控制

回答

相关问题