当最大宽度阈值生效时，按钮内部的图标将向右移动

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>