设置按钮大小相同indepentent

Question

所以我有一个解决方案，做这样的事情：

的问题是，每次我有一个稍微大一点的文字我的按钮增加，并成为真正的丑陋，因为我有一个充满按钮，我想保持相同的大小。

所以我认为一个很好的选择是保持按钮的大小相同？ （如果有其他选项想知道:)）。

所以我有这个：

  <div class="col-md-1"> 
       <button class="btn btn-primary-outline btn-small"> 
        <span class="glyphicon glyphicon-share"></span> 
        <br><span class="fontSize">Image</span> 
       </button> 
      </div> 

我怎样才能改变我的解决方案，有我想要的按钮同样的效果，我的意思是用图片和文字居中与图像mantaining的大小按钮？任何帮助我欣赏:)

谢谢

Answer 1

你在找这样的吗？ （我知道，这是丑陋的）

#test{ 
 
    min-width: 5px; 
 
    max-width: 5px; 
 
}

<button id="test">test</button>

Answer 2

在这里，你有一个解决方案https://jsfiddle.net/r3g31e11/1/

.btn { 
 
    width: 100px; 
 
    height: 30px; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button class="btn btn-primary"> 
 
Submit 
 
</button> 
 
<br/> 
 
<br/> 
 

 
<button class="btn btn-primary"> 
 
Testisnottoincreasebuttonwidth 
 
</button>

去截断多余的字符使用椭圆。设置高度&按钮的宽度。

Answer 3

.test { 
 
width : 80px; 
 
} 
 

 
.test > span { 
 
    overflow: hidden; 
 
    white-space:nowrap; 
 
    text-overflow:ellipsis; 
 
    width:40px; 
 
    display:inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-1"> 
 
    <button class="btn btn-primary-outline btn-small test"><span>Test</span></button> 
 
    <button class="btn btn-primary-outline btn-small test"><span>Test with large size</span></button> 
 
</div>