设置相同大小的按钮与文本大小无关

Question

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

问题是，每次我的文字都有一个更大的文字我的按钮增加了，它变得非常难看，因为我有一个完整的按钮部分，我想保持相同的大小。

所以我认为一个好的选择是为按钮保持相同的尺寸？ （如果还有其他选择想知道：））。

所以我有这个：

function autoStart()
{
        if (currentSlide === slidesNum - 1) {
            currentSlide=0;
        }
        goNext();
}

setInterval(autoStart,3000);

如何更改我的解决方案以获得与按钮相同的效果，我的意思是图像和文本居中与图像保持按钮的大小相关？任何帮助，我欣赏:)）

由于

Answer 1

你正在寻找这样的东西吗？ （我知道，这很难看）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用解决方案https://jsfiddle.net/r3g31e11/1/

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用椭圆截断额外字符。设定高度＆amp;按钮的宽度。

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>