我有尺寸200x50的按鈕圖像沒有文字是這樣的:添加文本內的按鈕圖像和文字限制不超過按鈕的大小
我怎樣才能動態地更新這樣的按鈕中的文本:
,並確保該按鈕不會調整大小和文字並不按鈕以外的任何地方流動?文字可以是「點擊此處」或「點擊此按鈕以查看更多細節」之類的單詞,如圖片中所示。另外,有沒有一種方法來設置基於按鈕大小的文本限制?
非常感謝。
我有尺寸200x50的按鈕圖像沒有文字是這樣的:添加文本內的按鈕圖像和文字限制不超過按鈕的大小
我怎樣才能動態地更新這樣的按鈕中的文本:
,並確保該按鈕不會調整大小和文字並不按鈕以外的任何地方流動?文字可以是「點擊此處」或「點擊此按鈕以查看更多細節」之類的單詞,如圖片中所示。另外,有沒有一種方法來設置基於按鈕大小的文本限制?
非常感謝。
我給相同的基本答案,另外兩個人已經具備。但動態地,你想用什麼語言?
這段代碼的唯一區別是我使用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>
也許你正在尋找類似的東西?
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
}
<div class="button">
<span class="buttontext">Click Here Now! It has a lot of text, but it won't show!</span>
</div>
請記住,你可能要考慮創建按鈕的其他方式。我最喜歡的方式是純CSS :-)查看this cool guide瞭解更多信息。
是的,有點後的畫面。我已經沒有文字的按鈕圖像,所以按鈕的大小是固定的。我只需要動態添加文本。如果有很多文字像'點擊這個按鈕來查看更多細節',那麼這個按鈕看起來應該和我用圖像和文字附加的按鈕完全一樣。只要能夠,按鈕應該能夠接受文本。用較少的文字像'點擊這裏現在'然後文本應居中。我怎麼做?謝謝你的時間! – user3376592
@ user3376592請更新您的問題並添加您的代碼。 – NickyTheWrench
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>
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>
用按鈕鏈接的好回答。謝謝。 – user3376592
正是我想要的。感謝您建立@NickyTheWrench的答案。我希望Stack Overflow允許我選擇兩個最佳答案。由於這個符合我的要求,我選擇這個作爲最好的答案。 – user3376592