Javascript 使列表项水平在小屏幕中无行盈亏平衡

我正在尝试使用无序列表创建图库视图。大屏幕：

在小屏幕上，它将像这样包装：

如何隐藏溢出超过一行的内容

以下是HTML：

<div ng-controller="TypeaheadCtrl" class="container-fluid ng-scope" style="
        display: inline;
    ">
    <ul style="list-style-type:none;margin:0;padding:0;display: inline;"><!-- ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">12 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope" style="display: inline-block;">
            <img src="/images/Sunny-icon.png" style="display: block;width:56px;height:56px;">13 Aug
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">14 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">15 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">16 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;float: left;clear: both;">17 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">18 Aug
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">19 Aug
        </li><!-- end ngRepeat: location in forecasts -->
    </ul>
</div>

---

对小型桌面使用媒体查询，例如：500px，指定固定高度，溢出：隐藏以隐藏，以下是我的代码：

我的css：

    @media screen and (max-width:500px) { /* media query for screen
    with maximum width of 500px */
        div[ng-controller=TypeaheadCtrl] { /* parent div height is
    fixed to 70px so other line is hidden */
            height: 70px; /* image + text */
            overflow: hidden;
        }
    }

    div[ng-controller=TypeaheadCtrl] > ul { /* > is for the first ul child for div,
    if you gonna have an ul in a first ul, this rule don't gonna apply */
        font-size: 0; /* hack for remove spacing for inline-block */
        list-style-type:none;
        margin:0;
        padding:0;
    }

    div[ng-controller=TypeaheadCtrl] li {
        font-size: 12px; /* add font-size again for li */
        display: inline-block;
    }

    div[ng-controller=TypeaheadCtrl] li > img {
        display:block;
        width:56px;
        height:56px;
    }

我也从html中删除了所有内联样式，这样更易于维护。 希望这是你想要的