ボタンのオーバーフローを示す省略記号が機能しない

Question

ボタンが分割幅に達した後、アプリケーション要件が表示されます。一度その楕円を表示する必要があります。私は部分的に行っているが、期待通りに動作していない。

テキストがフレームから流出した後に隠れます。レスポンシブルデザインに問題を引き起こしています。

事前にこれと感謝を修正するために私を助けてください

For your reference check this image

#margin { 
 
    width: 57%; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    padding: 10px; 
 
} 
 

 

 
.btn { 
 
    border-color: #fff; 
 
    background-color: #fdfdfd; 
 
    text-align: center; 
 
    display: inline; 
 
    border-radius: 3px; 
 
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px; 
 
    margin: 1px 2px; 
 
    padding: 4px 7px; 
 
    /* display: inline-block; */ 
 
    border-top: 1px solid #fff; 
 
}

<div id="margin"> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 

 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 

 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 

 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 

 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 

 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 

 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 

 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 
<span class="btn">1</span> 
 

 
</div>

Answer 1

text-overflow: ellipsisは、DOM要素を隠しませんので、ボタン自体があっても表示されます彼らテキストを含むテキストは非表示になります。あなたが唯一の解決策CSSをしたい場合は、あなたのCSSに、このようなものを追加してみてください：

#margin { 
    position:relative; 
    width: 57%; 
    overflow: hidden; 
    white-space: nowrap; 
    padding: 10px; 
} 

#margin::after { 
    content:"..."; 
    position:absolute; 
    top:0; 
    bottom:0; 
    right:0; 
    padding:10px; 
    background-color:white; 
} 

これは内部省略記号や手動#marginの右側をカバーするために白い背景を持つ要素を追加します。省略記号は常にCSSソリューションで表示されますが、少量のJavascriptまたはjQueryで非表示にすることができます。あなたは働いてを見ることができます。