如何使元素保持內聯

Question

我正在使用麪包屑系統like this。我正在編寫一些代碼，以使碎片響應並在較小的屏幕上崩潰。這一切都很順利，但我無法修復一個不守規矩的最終碎屑/頁面標題。

在這種情況下，頁面標題是「非常長的標題以顯示它如何打破設計」但它應該用點來切斷它，比如「真正長的標題...」，而不是打破下一行。

我嘗試了幾個我創建的類，no-wrap和dot-overflow，但他們都沒有做到這一點。

由於某些原因，強制將高度屬性設置爲50px或類似的操作將其保留在一行上會在麪包屑覆蓋下面的內容時產生問題，並且仍然無法防止文本突破到下一行。

JS小提琴：https://jsfiddle.net/7o1o81xa/

的CSS

.no-wrap { 
    white-space:nowrap; 
} 

.dot-overflow { 
    overflow:hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

的HTML

<div class="breadcrumbs-compact-container"> 
    <div class="breadcrumbs-compact flat"> 
    <a href="#" class="active">Support</a> 
    <a href="#">How To</a> 
    <a href="#"><span class="dot-overflow no-wrap">Really long heading to show how it breaks the design</span></a> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

Answer 1

您可以提供使用媒體查詢象下面這樣：

你可以改變你想打破寬度。併爲最後一個鏈接定義最大寬度。

@media screen and (max-width:700px){ 
    a.dot-overflow { 
    max-width:200px; 
    } 
} 

請查看下面的代碼片段。

var crumbLinkOriginalValues = new Array(); 
 

 
$(function() { 
 
    checkCrumbSizePerpetual(); 
 
}); 
 

 
function checkCrumbSizePerpetual() { 
 
    checkCrumbSize(); 
 
    $(window).resize(function() { 
 
    checkCrumbSize(); 
 
    }); 
 
} 
 

 
function checkCrumbSize(returnWidth) { 
 
    var overallWidth = 0; 
 
    $('.breadcrumbs-compact a:last-of-type').css('display', 'inline-block').addClass('dot-overflow'); 
 
    $('.breadcrumbs-compact a').each(function() { 
 
    overallWidth += $(this).outerWidth(); 
 
    }); 
 
    if (returnWidth) 
 
    return overallWidth; 
 

 
    if (overallWidth > $(window).width()) { 
 
    // minimize crumbs 
 
    minimizeCrumbs(); 
 
    } else { 
 
    // check if we need to maximize it 
 
    maximizeCrumbs(); 
 
    } 
 
} 
 

 
function maximizeCrumbs() { 
 
    if ($('.crumb-to-minimize').length) 
 
    maximizeCrumbsLiteral(); 
 
} 
 

 
function minimizeCrumbs() { 
 
    var crumbLinks = $('.breadcrumbs-compact a'); 
 
    var crumbCounter = 1; 
 
    crumbLinks.removeClass('crumb-to-minimize'); 
 
    crumbLinks.each(function() { 
 
    var text = $(this).text(); 
 
    if (text != '...') { 
 
     crumbLinkOriginalValues[crumbCounter - 1] = new Array(); 
 
     crumbLinkOriginalValues[crumbCounter - 1]['text'] = text; 
 
     crumbLinkOriginalValues[crumbCounter - 1]['padding-left'] = $(this).css('padding-left'); 
 
     crumbLinkOriginalValues[crumbCounter - 1]['padding-right'] = $(this).css('padding-right'); 
 
     $(this).attr('title', $(this).text()); 
 
    } 
 
    $(this).attr('data-crumb-counter-id', crumbCounter - 1); 
 
    if (crumbCounter < crumbLinks.length) 
 
     $(this).addClass('crumb-to-minimize'); 
 
    else 
 
     minimizeCrumbsLiteral(); 
 
    crumbCounter++; 
 
    }); 
 
} 
 

 
function minimizeCrumbsLiteral(selfRan) { 
 
    $('.breadcrumbs-compact a.crumb-to-minimize').text('...').css('padding-left', '25px').css('padding-right', '2px'); 
 
    $('.breadcrumbs-compact a:first-of-type').css('padding-left', '5px').css('padding-right', '5px'); 
 

 
    // check if first one needs to be reduced 
 
    if (typeof selfRan != 'undefined' && !selfRan && checkCrumbSize(true) < $(window).width()) { 
 
    $('.breadcrumbs-compact a:first-of-type').addClass('crumb-to-minimize'); 
 
    minimizeCrumbsLiteral(true); 
 
    } 
 
} 
 

 
function maximizeCrumbsLiteral() { 
 
    $(this).attr('data-crumb-counter-id'); 
 
    var crumbLinks = $('.breadcrumbs-compact a'); 
 
    crumbLinks.each(function() { 
 
    var thisCrumbsVals = crumbLinkOriginalValues[$(this).attr('data-crumb-counter-id')]; 
 
    $(this).text(thisCrumbsVals['text']).css('padding-left', thisCrumbsVals['padding-left']).css('padding-right', thisCrumbsVals['padding-right']); 
 
    }); 
 
}

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans); 
 
.breadcrumbs-compact-container { 
 
    position: relative; 
 
    z-index: 1; 
 
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); 
 
    padding: 0; 
 
} 
 

 
.breadcrumbs-compact { 
 
    font-family: 'Merriweather Sans', arial, verdana; 
 
    text-align: center; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    margin-bottom: -6px; 
 
    counter-reset: flag; 
 
} 
 

 
.breadcrumbs-compact a { 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    outline: none; 
 
    display: block; 
 
    float: left; 
 
    font-size: 16px; 
 
    line-height: 36px; 
 
    color: white; 
 
    padding: 0 10px 0 30px; 
 
    background: #666; 
 
    background: linear-gradient(#666, #333); 
 
    position: relative; 
 
} 
 

 
.breadcrumbs-compact a:first-child:before { 
 
    left: 14px; 
 
} 
 

 
.breadcrumbs-compact a.active, 
 
.breadcrumbs-compact a:hover { 
 
    background: #333; 
 
    background: linear-gradient(#333, #000); 
 
} 
 

 
.breadcrumbs-compact a.active:after, 
 
.breadcrumbs-compact a:hover:after { 
 
    background: #333; 
 
    background: linear-gradient(135deg, #333, #000); 
 
} 
 

 
.breadcrumbs-compact a:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -18px; 
 
    width: 36px; 
 
    height: 36px; 
 
    transform: scale(0.707) rotate(45deg); 
 
    z-index: 1; 
 
    background: #666; 
 
    background: linear-gradient(135deg, #666, #333); 
 
    box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); 
 
    border-radius: 0 5px 0 50px; 
 
} 
 

 
.breadcrumbs-compact a:last-child:after { 
 
    content: none; 
 
} 
 

 
.breadcrumbs-compact.flat a:last-of-type { 
 
    border-right: none; 
 
} 
 

 
.breadcrumbs-compact.flat a, 
 
.breadcrumbs-compact.flat a:after { 
 
    background: white; 
 
    color: #555; 
 
    transition: all 0.5s; 
 
} 
 

 
.breadcrumbs-compact.flat a:before { 
 
    background: white; 
 
    box-shadow: 0 0 0 1px #ccc; 
 
} 
 

 
.breadcrumbs-compact.flat a:hover, 
 
.breadcrumbs-compact.flat a.active, 
 
.breadcrumbs-compact.flat a:hover:after, 
 
.breadcrumbs-compact.flat a.active:after { 
 
    background: #00C247; 
 
    color: white !important; 
 
} 
 

 
.breadcrumbs-compact.flat a:last-of-type:hover { 
 
    background: none; 
 
    color: black !important; 
 
} 
 

 

 

 
.no-wrap { 
 
    white-space:nowrap; 
 
} 
 

 
.dot-overflow { 
 
    overflow:hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
@media screen and (max-width:700px){ 
 
     a.dot-overflow { 
 
     max-width:150px; 
 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 

 
<div class="breadcrumbs-compact-container"> 
 
    <div class="breadcrumbs-compact flat"> 
 
    <a href="#" class="active">Support</a> 
 
    <a href="#">How To</a> 
 
    <a href="#"><span class="dot-overflow no-wrap">Really long heading to show how it breaks the design</span></a> 
 
    </div> 
 
    <div style="clear: both;"></div> 
 
</div>

Answer 2

爲了使點溢出工作，你需要有一個最大寬度集。否則，它從來沒有實際溢出任何東西。一旦你爲你的點溢出添加一個最大寬度，它應該適用於我假設你想要做的事情！