Question

更新：使用flexbox是一个选项，但首选支持旧版浏览器的解决方案。

这应该是一项简单的任务，但现在我正在寻找解决方案，但没有成功。我想创建一个导航，其中中间跨度“非常长的标题1 2 2 3 4 ...”不会进行换行并且当视口尺寸变得非常小时垂直增长。应隐藏不适合span标题标题的内容。

为了更好地理解，我附上了两个图形和一个jsfiddle示例。

电流：

目标：

的jsfiddle： https://jsfiddle.net/herbert_hinterberger/ofu8c8rn/3/

<div class="container-fluid">

<div class="row row-offcanvas row-offcanvas-left">

    <div class="col-xs-12 col-sm-9">
        <div class="row" id="header"> <!--header-->
            <div class="col-xs-12">
                <span id="header-menu-trigger" class="pull-left hidden-md hidden-lg" data-toggle="offcanvas">
                    <i class="fa fa-bars fa-3x"></i>
                </span>
                <span>
                    <h3 id="header-title">Very long headline 1 2 3 4 5 6 7 8 9 10 </h3>
                </span>
                <span class="notification-container pull-right">
                    <h3 class="notification">8</h3>
                </span>
            </div>
        </div> <!--/header-->
    </div> <!--/offcanvase-->
</div> <!--/row-->

Answer 1

尝试flex。 Flex将确保中间元素伸展/缩小到可用空间。另外，在通知容器div上删除pull-right。

https://jsfiddle.net/5s3v55px/

添加此CSS

.my-flex{
    display:flex;
}
.flex-1{
    flex:1;
}

HTML更改

<div class="col-xs-12 my-flex">
                    <span id="header-menu-trigger" class="pull-left hidden-md hidden-lg" data-toggle="offcanvas">
                        <i class="fa fa-bars fa-3x"></i>
                    </span>
                    <span class="flex-1">
                        <h3 id="header-title">Very long headline 1 2 3 4 5 6 7 8 9 10 </h3>
                    </span>
                    <span class="notification-container">
                        <h3 class="notification">8</h3>
                    </span>
                </div>

中间跨度元素，隐藏自动宽度和溢出

1 个答案: