按钮文字问题

Question

我的表格上有一个固定宽度的按钮。该按钮的文本是动态的：

如果该动态文本的长度大于100px，我面对的是：

这就是我的代码的样子

<button id="btn" type="buttson" style="width:120px;color:red" class="btn btn-primary">
    <span>Dynamic Textttttttttttttttttttttttt</span>
</button>

如何让文字不会溢出按钮？

Answer 1

1）如果您希望修复按钮宽度然后处理长文本，请使用文字溢出 Elipses ，在您的CSS。这将使您的文字像Dynamic Textt..一样达到按钮的宽度。

button span{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2）如果要增加按钮宽度和文本。然后使用 LGSon 提供的解决方案;将wdith:120px更改为min-width:120px

Answer 2

您可以通过将style="width: 120px; ..."更改为style="min-width: 120px; ..."

来解决此问题

然后你的按钮最小宽度为120px，如果变宽则会随文本一起增长。

更新：如果您保留固定宽度并设置white-space: normal，则文字会断开。

button {
  min-width: 120px;
}

button:nth-of-type(3) {
  width: 120px;
  white-space: normal;
}

<button>Short text</button><br>
<button>Long long long long long text</button><br>
<button>Long long long long long text</button>

Answer 3

您可以使用：style="width: auto;"

Answer 4

使用css的auto width属性，这将自动适合按钮的宽度。

width:auto;

Answer 5

选择其中一个希望一个解决方案符合您的需求

<强>段

#button1{
  width:120px;
  background:red;
  padding:20px;
  color:white;
}
#button2{
  width:120px;
  background:red;
  overflow:hidden;
  padding:20px;
  color:white;
   }
   #button3{
 min-width:120px;
  background:red;
 padding:20px;
 color:white;
   }
   #button4{
 width:120px;
 background:red;
 word-break: break-all;
 padding:20px;
 color:white;
   }

<button id="button1" >text</button>
<button id="button2" >textttttttttttttttttttttttttttttttttttttttttttt </button> 
<button id="button3"   > texttttttttttttttttttttttttttttt</button>
<button id="button4" >texttttttttttttttttttttttttttttttttttttttt</button>