流體容器上方的流體按鈕上的文本省略號

我有一個框，其大小由其中的img定義。在這個圖像中有一個可以容納任意數量文本的按鈕。如果文本小於圖像的寬度，那麼該按鈕將被放置在中間，如果文本多於圖像，則必須使用文本省略進行剪切。文本的最大尺寸必須是圖片的寬度，所以即使它不適合，它也不能超過框。有沒有人知道使用CSS的這種唯一的獨奏？以下是演示：http://jsfiddle.net/h3emzbcq/3/流體容器上方的流體按鈕上的文本省略號

<div class="border-box"> 
<div class="item-pic"> 
    <img src="http://demo7.firstvoicemedia.com/u5.png" alt="" class="img-responsive"> 
    <div class="item-btn"> 
     <button class="btn btn-green"><span class="btn-text">Text place Text place Text placeText place Text place Text place</span></button> 
    </div> 
</div>

文本的地方

謝謝您的回答。

來源

2014-09-12 boxer

我看到你jsfiddle就好。我想我不明白你的問題。你能解釋一些你正在遭受的問題嗎？ – frikinside 2014-09-12 11:33:44

如果文字較短，則位於居中位置，而如果文字較多且圖像不能垂直放置，則該按鈕會沿着圖像/容器水平放置，並且文本被剪切爲文本-橢圓。你明白我說的嗎？ :) – boxer 2014-09-12 12:57:30

其實，你剛剛說的適合你提供的jsfiddle問題。我沒有看到你的實施問題。現在，我看到了接受的答案，我發現您要將按鈕的寬度與文本寬度相匹配，直到達到圖像的寬度，但我沒有看到您的問題需要的參考。或者我需要知道的眼鏡！ – frikinside 2014-09-15 10:37:24

刪除width並在<button>設置max-width: 100%：

.btn { 
    border: 0; 
    padding: 0; 
    margin: 0; 
    /* added */ 
    max-width: 100%; 
}

這裏是updated fiddle。

來源

2014-09-12 11:28:07

如果文本長於按鈕，則需要文本省略號（...）。 – boxer 2014-09-12 11:56:25

這是個好主意，謝謝！ :) – boxer 2014-09-12 14:01:23

流體容器上方的流體按鈕上的文本省略號

回答

相關問題