如何使用CSS flexbox将Bootstrap 4下拉菜单中的图标向右对齐

Question

您如何使用Bootstrap 4在菜单下方进行设置，以使右侧的图标始终保留，而溢出时文本会自动被截断（使用…）。

<li class="nav-item dropdown">
    <a href='#' class='a nav-link dropdown-toggle' aria-expanded='false' data-toggle='dropdown'>Dropdown</a>
    <ul class='dropdown-menu' role='menu'>
        <li><a href="page1.html" class='dropdown-item' role='menuitem'>Long title</a></li>
        <li><a href="page2.html" class='dropdown-item' role='menuitem'>Cut off with</a></li>
    </ul>
</li>

我尝试使用伪元素::after显示图标，但是不允许在文本上使用省略号。我尝试使用两个DIV，其中float-left和float-right在重叠时会失败。

我正在寻找一种避免使用硬编码宽度的解决方案。我认为正确的方向是使用CSS3 flexbox：

<li>
    <a href="page1.html" class='dropdown-item' role='menuitem'>
        <span class='title'>Long title</span>
        <span class='icon'><i class='fa fa-lock'></i></span>
    </a>
</li>

使用以下CSS：

.dropdown-item {display:flex; flex-direction:row}
.title {display:flex; margin-right: auto}
.icon {display: flex}

不幸的是，这种方法行不通。

Answer 1

您不必“必须” 设置标题的宽度以使省略号起作用。但是，您确实需要将其宽度（或其父级宽度）设置为小于其内容的宽度，以使其溢出。为此，您可以将下拉菜单的最大宽度设置为0：

.dropdown-menu {
    max-width: 0;
}

基于OP，我们可以使用flexbox为标题和图标设置样式：

.dropdown-item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.dropdown-item .title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

HTML

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
        Dropdown link
    </a>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">
            <span class="title">Action</span>
        </a>
        <a class="dropdown-item" href="#">
            <span class="title">Long title another action</span>
            <i class="fa fa-lock fa-fw"></i>
        </a>
        <a class="dropdown-item" href="#">
            <span class="title">Cut off with another action</span>
            <i class="fa fa-lock fa-fw"></i>
        </a>
      </div>
  </li>

CSS

.dropdown-menu {
    max-width: 0;
}

.dropdown-item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.dropdown-item .title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

结果

小提琴： https://jsfiddle.net/aq9Laaew/175868/

Answer 2

这是我的解决方法。

我制作了图标position:absolute。

此外，为了使省略号可见，您需要添加标题的宽度。 没有宽度，浏览器将如何知道文本已经溢出。

.dropdown-item{
  position:relative;
}

.title{
    width: 130px;/*Adjust width to control ammount of text visible*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
    margin-right: 7px;
}
.icon{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<li class="nav-item dropdown">
  <a href='#' class='a nav-link dropdown-toggle' aria-expanded='false' data-toggle='dropdown'>Dropdown</a>
  <ul class='dropdown-menu' role='menu'>
<li>
    <a href="page1.html" class='dropdown-item' role='menuitem'>
        <div class='title'>Long title title title</div>
        <i class='icon fa fa-lock'></i>
    </a>
</li>
<li>
    <a href="page1.html" class='dropdown-item' role='menuitem'>
        <div class='title'>Long title title title</div>
        <i class='icon fa fa-lock'></i>
    </a>
</li>
  </ul>
</li>