如何使元素保持内联

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

为了使点溢出工作，你需要有一个最大宽度集。否则，它从来没有实际溢出任何东西。一旦你为你的点溢出添加一个最大宽度，它应该适用于我假设你想要做的事情！