在按钮图像中添加文字并将文字限制为不超过按钮大小

Question

我有一个尺寸为200x50的按钮图像，没有这样的文字：

。

如何动态更新按钮内的文字，如下所示：

并确保按钮没有调整大小并且文本不会在按钮外的任何位置流动？文本可以是更少的单词，如“单击此处”或“单击此按钮可查看更多详细信息”，如图中所示。另外，有没有办法根据按钮大小设置文本限制？

非常感谢你。

Answer 1

也许你正在寻找这样的东西？

＆＃13;

＆＃13;

div.button {
  background-image: url('http://i.stack.imgur.com/599dc.png');
  height: 50px;
  width: 200px;
  text-align: center;
}
span.buttontext {
  width: 150px;
  height: 50px;
  margin: 0 auto;
  margin-left: 45px;
  padding-top: 15px;
  color: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden
}

＆＃13;

<div class="button">
  <span class="buttontext">Click Here Now! It has a lot of text, but it won't show!</span>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，您可能需要考虑其他创建按钮的方法。我最喜欢的方式是纯CSS :-)查看this cool guide了解更多信息。

Answer 2

我给出了与其他两个人已有的相同的基本答案。但就动态而言，您想使用哪种语言？

此代码的唯一区别是我使用onClick显示javascript以更改文本。你当然可以使用事件监听器或诸如此类的东西。此外，我的代码可以完成居中的1,2或3行。

（点击之前和之后的文字示例图片:)

    function changetext(num, text) {
      e = document.getElementById('button' + num);
      e.innerHTML = text;

    }

.button-div {
  background-image: url('http://i.stack.imgur.com/599dc.png');
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* add "cursor:" hand or other styles */
}
.button-text {
  line-height: 17px;
  /* fits three lines better */
  display: inline-block;
  max-height: 50px;
  width: 200px;
  padding: 0 5px 0 45px;
  box-sizing: border-box;
  color: #F4ED3E;
  margin-top: -3px;
  /* negative margin to center */
  /* add other styles */
}

<div class="button-div">
  <div onClick="changetext(1, 'new text')" class="button-text" id="button1">1st line
    <br>2nd
    <br>3rd
    <br>4th</div>
</div>

<br>

<div class="button-div">
  <div onClick="changetext(2, 'Button Twos new text')" class="button-text" id="button2">Button with a bunch of text on it.</div>
</div>

<br>

<div class="button-div">
  <div onClick="changetext(3, 'Button3s Spiffy Text is now 2 lines!' )" class="button-text" id="button3">Button little text.</div>
</div>

Answer 3

div.button {
 background-image: url('http://i.stack.imgur.com/599dc.png');
 height: 50px;
 width: 200px;
 text-align: center;
}
span.title {
  text-align: center;
  color:#FF0;
  height: 50px;
  width: 150px;
  margin-left: 40px;
  padding-top: 7px;
  font-size: 13px;
  display: block;
}


<div class="button">
  <span class="title"><a href="#" style="">Click here on this button to <br>view more details</a></span>
</div>

Answer 4

div.button{
width:200px;
height:50px;
background-image:url(599dc.png);
 } 
span.buttontext{
width: 150px;
height: 50px; 
margin-left: 45px;
padding-top: 8px;
color:#FF0;
display: block;
 }

<div class="button">
  <span class="buttontext">Click on this button to view more details</span> 
</div>