Значки внутри кнопок сдвигаются вправо, когда в игру вступает порог максимальной ширины.

Question

Извините за подробное название, я действительно не знал, как еще объяснить, что происходит. Пусть этот JsFiddle говорит о моей проблеме: https://jsfiddle.net/aq9Laaew/305608/

Если вы заметили, что на кнопках, текст которых был обрезан, значки смещены вправо на несколько пикселей. Я понятия не имею, что с этим делать и почему это происходит.

Вот код HTML, который я использую для репликации этой проблемы в моем проекте:

<div class="container">
  <div class="row">
    <div class="content">
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>1
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>234567890
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>3
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>4
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>5
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>6
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>7
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>8
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>9
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>10
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>11
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>12
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>13
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>14
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>15
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>16123412341234
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>17
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>18
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>19
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>20
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>21
        </button>
      </div>
    </div>
  </div>  
</div>

Вот CSS, который я использую:

.content {
    text-align: left;
    display: flex;
    flex-wrap: wrap;    
    align-content: flex-start;
    height: 500px;
    overflow-y: scroll;
}

.content div {
    width: 95px;
    margin-bottom: 5px;
    margin-right: 5px;    
}

.content div i {
  margin-right: 5px;
}

button {
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Я использую бутстрап, который, как я полагаю, вероятно, вызвал смещение фантома, но понятия не имею, с чего начать. Любая помощь будет принята с благодарностью.

Answer 1

Вы можете просто исправить это, настроив text-align на left. По умолчанию он установлен на center, а когда текст обрезан, кажется, что пространство, необходимое для ..., меньше пропущенных слов, поэтому все будет смещено для центрирования.

<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.content {
    text-align: left;
    display: flex;
    flex-wrap: wrap;    
    align-content: flex-start;
    height: 500px;
    overflow-y: scroll;
}

.content div {
    width: 95px;
    margin-bottom: 5px;
    margin-right: 5px;    
}

.content div i {
  margin-right: 5px;
}

button {
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align:left;/*added*/
}
</style>
<div class="container">
  <div class="row">
    <div class="content">
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>1
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>234567890
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>3
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>4
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>5
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>6
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>7
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>8
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>9
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>10
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>11
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>12
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>13
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>14
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>15
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>16123412341234
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>17
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>18
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>19
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>20
        </button>
      </div>
      <div>
        <button>
          <i class="fa fa-folder fa-lg" #icon></i>21
        </button>
      </div>
    </div>
  </div>  
</div>