Как выровнять значки вправо в выпадающих элементах Bootstrap 4 с помощью CSS flexbox

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>