css布局一问,关于overflow hidden

mia0x75 发布于 2015/07/01 22:59
阅读 368
收藏 1

移动端页面,想在页面底部固定做两行推荐阅读,大概代码如下(具体可以修改调整)。

<div id="footer">
  <div style="padding: 4px;">
    <div style="float: left; padding-right: 8px; line-height: 0;">
      <img alt="" width="64" height="64" src="#">
    </div>
    <div>
      <p><a href="#">推荐阅读一</a></p>
      <p><a href="#">推荐阅读二</a></p>
    </div>
    <div style="clear: both;"></div>
  </div>
</div>


即:左侧一个图片,右侧两行,每行一个链接


问:因为手机屏幕宽度不一,当链接标题很长当时候会导致换行,如何控制overflow:hidden,以确保页面布局一致。


谢谢。

加载中
1
呆呆的麦兜
呆呆的麦兜
    overflow: hidden;
    text-overflow: ellipsis;

    white-space: nowrap;

加上这三个

0
梦想岛
梦想岛
display:flex
手机支持css3 可以用这货。
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */


but,如果是电脑端在国情上来讲就蛋爆了。


0
红星xx
红星xx
width:100%;height:70px;overflow:hidden;
0
降龙罗汉
降龙罗汉

1. 强制标题不换行,并overflow:hidden;

2. 截取链接标题,固定长度,a标签增加title属性为完整链接标题。

返回顶部
顶部