Bootstrap 4 - Comment définir la largeur automatique d'un élément central inline ou flex ?

Question

Exemple ici . Si "token" est très long, je dois le masquer par une ellipse. Je n'aime pas ma solution avec max-width: calc() parce qu'il est très spécifique. Est-il possible de résoudre le problème avec Bootstrap 4, flex-box ou autre ?

Answer 1

Vous pouvez ajouter d-flex dans la classe utilitaire inliner-container et ajouter flex:0 100% a .mx-1

Par conséquent, vous supprimerez float:left

En tant que @zimSystem a souligné qu'il est possible d'utiliser text-truncate de la V4, au lieu d'utiliser les propriétés CSS.

.mx-1 {
  flex: 0 100%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="card my-1" data-id="17629520">
    <div class="card-header py-1">
      <a href="http://vk.com/disorrder"><span class="text-uppercase text-info pr-2">vk</span></a>
      <b>Username</b>
    </div>
    <div class="card-block py-2">
      <div class="inliner-container d-flex">
        <b class="">Token(OK):</b>
        <code class="inliner-width mx-1 text-truncate">
          LONG_TEXT_HERE_WITH_ELLIPSIS_5734cc381443bacf05913516a48f5e1c55d4f2f15f79a273d0c07886b914dd07d3397c2cba9eaf18d6cdd
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
      <div class="inliner-container  d-flex">
        <b class="">Token(OK):</b>
        <code class="inliner-width mx-1 text-truncate">
          short_text
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="mt-2">
      <div>
        Добавить:
        <a class="btn btn-sm btn-outline-success text-uppercase ml-1" href="http://stackoverflow.com/vk/token" target="_blank">vk</a>
      </div>
    </div>
  </div>

Answer 2

Utiliser le nouveau d-flex y text-truncate classes.

<div class="card-block py-2">
      <div class="d-flex inliner-container">
        <b class="inliner-width">Token(OK):</b>
        <code class="inliner-width mx-1 text-truncate">
          LONG_TEXT_HERE_WITH_ELLIPSIS_5734cc381443bacf05913516a48f5e1c55d4f2f15f79a273d0c07886b914dd07d3397c2cba9eaf18d6cdd
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
      <div class="inliner-container">
        <b class="inliner-width">Token(OK):</b>
        <code class="inliner-width mx-1" style="max-width: calc(100% - 60px - 35px);">
          short_text
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
      <div class="d-flex justify-content-between">
        <b>Token(Help):</b>
        <code class="mx-1 text-truncate">
          5734cc381443bacf05913516a48f5e1c55d4f2f15f79a273d0c07886b914dd07d3397c2cba9eaf18d6cdd
        </code>
        <button class="btn btn-sm btn-warning">
          <i class="fa fa-refresh" aria-hidden="true"></i>
        </button>
      </div>
      <div class="mt-1">
        <a class="btn btn-sm btn-primary" href="#">Save</a>
      </div>
  </div>

https://codepen.io/anon/pen/jBZGGE

Answer 3

Vous pouvez utiliser flex,

<div class="inliner-container">
    <b class="inliner-width flex-div">Token(OK):</b>
    <code class="inliner-width flex-div ellipsis">
      LONG_TEXT_HERE_WITH_ELLIPSIS_5734cc381443bacf05913516a48f5e1c55d4f2f15f79a273d0c07886b914dd07d3397c2cba9eaf18d6cdd
    </code>
    <button class="btn btn-sm btn-warning flex-div">
      <i class="fa fa-refresh" aria-hidden="true"></i>
    </button>
  </div>

.inliner-container {
  display: flex;
 }
.flex-div{
  flex-direction: column;

}
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
}

a supprimé la classe mx-1