要素をインラインにする方法

Question

パンくずリストシステムlike thisを使用しています。小さな画面ではクラムを反応させて崩壊させるためのコードを書いています。すべてがうまくいっていますが、最終的なクラム/ページタイトルを修正するのは難しいです。

この場合、ページタイトルは「デザインがどのように壊れているかを示すためには本当に長い見出し」ですが、次の行に折り返す代わりに「本当に長い見出し...」などのドットで切り捨てる必要があります。

私が作成したクラスは、no-wrapとdot-overflowの2つですが、いずれもそのトリックはありませんでした。

何らかの理由で、高さ属性を50pxなどに強制して1行にしておくと、その下のコンテンツがクラムに覆われてしまい、テキストが次の行に折れるのを防ぐことができません。

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; 
    } 
} 

コードで作成したコードスニペットを確認してください。あなた `ドットoverflow`クラスと組み合わせ

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

ドットオーバーフローが動作するためには、あなたは最大幅のセットを持っている必要があります。それ以外の場合は、実際には何もオーバーフローしません。あなたのドットオーバフローに最大幅を追加すると、あなたがやろうとしていると思っているもののために働くはずです！