Question

对不起，如果这是重复的，但我到目前为止还找不到任何有用的东西。

我有一个带有一些面包屑等的粘性导航栏，在某些情况下，其中一个项目的名称可能很长。这会强制最右边的项目下拉到较小的屏幕上。

这是模拟发生的事情。

我希望真正的长行部分能够缩小它会遇到其他部分的情况，总是有用户名和＆＃34;注销＆＃34;与其他人在同一条线上。当长标题部分太长时，它应该截断并使用省略号。

     <div id="topNav" >
            <div class="toolBar">
                <div class="leftTools">
                    <div class="">
                        <span class="icon-group glyphicon"></span>
                        <a asp-area="" asp-controller="Home" asp-action="index">Base</a>
                    </div>
                    <div id="breadcrumb" class="">                            
                        <a class="listPageLink" href="">
                            <span class="icon-carrot-right glyphicon"></span>
                            <span class="linkText">Type</span>
                        </a>                            
                        <a class="itemPageLink" href="">
                            <span class="icon-carrot-right glyphicon"></span>
                            <span class="linkText">stupid really long title for something wow is this name way too long to be useful for anything</span>
                        </a>                            
                        <a class="subCatPageLink" href="">
                            <span class="icon-carrot-right glyphicon"></span>
                            <span class="linkText">subcat</span>
                        </a>                            
                    </div>
                </div>                    
                <div class="rightTools">
                    <div class="">
                        <a>@User.GetName()</a>
                        @if (User.Identity.IsAuthenticated)
                        {
                            <a asp-area="" asp-controller="Home" asp-action="Logout">Logout</a>
                        }
                    </div>
                </div>                    
            </div>
            <div class="fadeBorder"></div>
        </div>

我不想要的：我不想使用javascript（如果可能的话），只需要CSS。我不想为不同的屏幕宽度编写一堆媒体查询。我宁愿不使用css计算，但如果这是唯一的方法，那就没关系。

我该如何做到这一点？

编辑：这是一个基本思想的方面。 https://jsfiddle.net/1h4maehs/

Edit2：这个代码是一个更好的例子：http://codepen.io/Nurdyguy/pen/dpdwGb

Answer 1

Flexbox和text-overflow:ellipsis可以提供帮助，但它确实需要您指定不要缩小的项目。

像这样：

＆＃13;

* {
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  list-style-type: none;
  white-space: nowrap;
  margin-bottom: 1em;
}
li {
  padding: 1em;
  white-space: nowrap;
  border: 1px solid green;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.no-shrink {
  flex-shrink: 0;
}
.right {
  margin-left: auto;
}

＆＃13;

<div class="wrap">
  <ul>
    <li class="no-shrink">lorem</li>
    <li class="no-shrink">Lorem</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, facere.</li>
    <li class="no-shrink">lorem</li>
    <li class="no-shrink">lorem</li>
  </ul>
</div>

<div class="wrap">
  <ul>
    <li class="no-shrink">lorem</li>
    <li class="no-shrink">Lorem</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li class="no-shrink right">lorem</li>
    <li class="no-shrink">lorem</li>
  </ul>
</div>

＆＃13;

如评论中所述，如果需要，您还可以为最后几个项目创建一个＆＃34; float：right`选项。

Answer 2

就个人而言，我实施text-overflow: ellipsis;，同时给每个面包屑提供最多可占用的空间。如果超过它，请添加省略号并隐藏其余部分。

.item {
  display: inline-block;
  max-width: 25%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.divider {
  vertical-align: top;
}

<div class="breadcrumb">
  <span class="item">Apple</span>
  <span class="divider">></span>
  <span class="item">Banana</span>
  <span class="divider">></span>
  <span class="item">Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry</span>
  <span class="divider">></span>
  <span class="item">Doh!</span>
</div>

如果需要，让一个div缩小

2 个答案: