溢出內容的寬度

我正在研究一個標籤滾動條，它基本上允許用戶滾動左側或右側標籤塊，如果有更多標籤比適合其當前包含div。我的計劃是讓組件div設置爲overflow：hidden，這樣標籤（和它們的父div）就不會換行。然後，我會有左右箭頭將標籤包裝器左右移動。溢出內容的寬度

我需要確定標籤包裝的寬度是否大於標籤滾動本身。如果是這樣，那麼我知道在標籤滾動條中有更多的標籤，並且我應該使箭頭可見，以便用戶可以單擊滾動並查看更多。佈局和一切看起來像預期的，但我的問題是，使用$（'。tag-wrapper'）。width（）;總是根據窗口寬度返回不同的值，實際內容沒有改變，情況不應該如此。如果屏幕足夠寬，我可能不需要顯示箭頭，因此我需要檢查窗口大小等的寬度。

任何想法爲什麼$（'。tag-wrapper'）。width（）;即使認爲可滾動內容本身沒有改變，會根據實際的窗口寬度給我不同的尺寸？

這裏是我的標記：

.tag-scroller { 
 
    overflow: hidden; 
 
    white-space: no-wrap; 
 
    display: block; 
 
    width: 100%; 
 
    height: 50px; 
 
    } 
 
    .tag-wrapper { 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    border: 1px solid green; 
 
    } 
 
    .tag { 
 
    display: inline-block; 
 
    width: initial; 
 
    text-align: center; 
 
    padding: 5px 10px 6px 10px; 
 
    }

<div class="tag-scroller"> 
 
    <div class="tag-wrapper"> 
 
    <div class="tag"></div> 
 
    <div class="tag"></div> 
 
    <div class="tag"></div> 
 
    <div class="tag"></div> 
 
    </div> 
 
</div>

來源

2016-01-04 omenclature

似乎有望在https://jsfiddle.net/933oxuz1/ –

使用jQuery工作，你可以使用jQuery的寬度讓您填充「標籤包裝」的總寬度（）財產。 – Korgrue

「white-space」屬性的正確值是'nowrap'。除此之外，你的代碼似乎工作得很好。預期的結果是什麼？ –

我用了jQuery outerWidth方法。

$(function() { 
 
    $(document).on('DOMNodeInserted DOMNodeRemoved', '.tag-wrapper', function(e) { 
 
    $('#p').text('tag-wrapper width: ' + $('.tag-wrapper').outerWidth() + 'tag-scroller width: ' + $('.tag-scroller').outerWidth()); 
 
    if ($('.tag-wrapper').outerWidth() > $('.tag-scroller').outerWidth()) { 
 
     alert('ok'); 
 
    } 
 
    }); 
 
    $('#btn').click(function(e) { 
 
    $('.tag-wrapper').append($('<div class="tag">1</div>')); 
 
    }); 
 
    $('#btnWidth').click(function(e) { 
 
    $('#p').text('tag-wrapper width: ' + $('.tag-wrapper').outerWidth() + 'tag-scroller width: ' + $('.tag-scroller').outerWidth()); 
 
    }); 
 
});

.tag-scroller { 
 
    overflow:hidden; 
 
    white-space:no-wrap; 
 
    display:block; 
 
    width:100%; 
 
    height:50px; 
 
} 
 
.tag-wrapper { 
 
    white-space: nowrap; 
 
    display:inline-block; 
 
    border:1px solid green; 
 
} 
 
.tag { 
 
    display:inline-block; 
 
    width:initial; 
 
    text-align:center; 
 
    padding: 5px 10px 6px 10px; 
 
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 

 

 
<div class="tag-scroller"> 
 
    <div class="tag-wrapper"> 
 
     <div class="tag">1</div> 
 
     <div class="tag">2</div> 
 
     <div class="tag">3</div> 
 
     <div class="tag">4</div> 
 
    </div> 
 
</div> 
 
<button id="btn">Click Me</button> 
 
<button id="btnWidth">Check Widths</button> 
 
<p id="p"></p>

來源

2016-01-04 21:39:37 gaetanoM

溢出內容的寬度

回答

相關問題