Html 当最大宽度阈值起作用时，按钮内的图标向右移动

很抱歉，这个冗长的标题，我真的不知道如何解释发生了什么。让这个JSFIDLE来说明我的问题：

如果您注意到按钮上的文本被截断，图标似乎向右移动了几个像素。我不知道这是怎么回事，也不知道为什么会发生

以下是我用于在项目中复制此问题的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>

---

我使用的是引导，我想可能是某种原因导致了幻影的移动，但我不知道从哪里开始。非常感谢您的帮助。

您只需将

文本对齐

调整为

左

，即可解决此问题。默认情况下，它被设置为

居中

，并且当对文本进行调整时，

…

所需的空间似乎小于省略的单词，因此所有内容都将移动到居中

.内容{
文本对齐：左对齐；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
高度：500px；
溢出y：滚动；
}
.内容组{
宽度：95px；
边缘底部：5px；
右边距：5px；
}
.内容第一组{
右边距：5px；
}
钮扣{
最大宽度：95px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
文本对齐：左；/*已添加*/
}
1.
234567890
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16123412341234
17
18
19
20
21

您只需将

文本对齐

调整到

左侧

即可纠正此问题。默认情况下，它被设置为

居中

，并且当对文本进行调整时，

…

所需的空间似乎小于省略的单词，因此所有内容都将移动到居中

.内容{
文本对齐：左对齐；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
高度：500px；
溢出y：滚动；
}
.内容组{
宽度：95px；
边缘底部：5px；
右边距：5px；
}
.内容第一组{
右边距：5px；
}
钮扣{
最大宽度：95px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
文本对齐：左；/*已添加*/
}
1.
234567890
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16123412341234
17
18
19
20
21

.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;
}