Question

当Bootstrap4-aplha6中的面包屑中的文字太长时，las crumb会跳到下一行：

public void ColorInfo(string colorName)
{
    try
    {
        Colors color = (Colors)Enum.Parse(typeof(Colors), colorName);
        switch (color)
        {
            case Colors.red:
                Debug.Print("red color");
                break;
        }
    }
    catch(ArgumentException ex)
    {
        Debug.Print("Unknown color");
    }
}

产地：

<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">A slightly too long title</span>
</nav>

我想：

 ---------------------------------
|                                 |
| Home / Library / Data           |
|   / A slightly too long title   |
|                                 |
|                                 |
|                                 |
 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

我尝试使用--------------------------------- | | | Home / Library / Data / A slig… | | | | | | | \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\，white-space: nowrap和overflow: hidden进行修复，但似乎效果不好，因为出于某种原因，在Bootstrap4中，breadcrumb-items是块浮动的左

有没有人找到解决方法而不覆盖所有Bootstrap类（省略号不是100％必要的）？

Answer 1

不要漂浮.breadcrumb-item。将.breadcrumb和.breadcrumb-item都设置为white-space: nowrap;。然后将overflow: hidden; text-overflow: ellipsis;添加到.breadcrumb以创建省略号。

＆＃13;

.breadcrumb, .breadcrumb-item {
  white-space: nowrap;
}
.breadcrumb .breadcrumb-item {
  float: none;
}
.breadcrumb {
  text-overflow: ellipsis;
  overflow: hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">asdf asdf asdf asdf asdf asdf a asdf asdf asdf asdf sadf</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">A slightly llllllitle</span>
</nav>

＆＃13;

Answer 2

当使用官方面包屑代码片段（带有<ol>和<li>标签）时，Michael的解决方案似乎不再适用于Bootstrap 4.1。这是另一种解决方案。

.breadcrumb {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb .breadcrumb-item {
    display: inline;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">             
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item active" aria-current="page">My page</li>       
            </ol>
        </nav>        
    </div>

Answer 3

引导程序4.1.3

将.flex-nowrap应用于.breadcrumb元素，然后将.text-truncate应用于.breadcrumb-item元素。这具有迫使面包屑容器不包装的效果，然后每个元素必须适合其中，从而截断文本。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container m-5" style="width:450px">
  <nav class="breadcrumb flex-nowrap">
    <a class="breadcrumb-item">Home</a>
    <a class="breadcrumb-item text-truncate">Library</a>
    <a class="breadcrumb-item text-truncate">Data</a>
    <a class="breadcrumb-item text-truncate">Thursday</a>
    <span class="breadcrumb-item active text-truncate">A slightly too long title</span>
  </nav>
</div>

防止Bootstrap4-apha6面包屑中出现新行

3 个答案: