HTML Drowdownは画像の下に選択したテキストを表示します

Question

選択したテキストがドロップダウンに設定した幅に対して長すぎる場合は、選択したテキストをドロップダウンイメージエリアに表示しません。私はtext-overflow: clip;またはoverflow: hidden、span.selectInnerの中ではうまくいくと思っていますが、そうではありません。

span.selectInnerは、データが付加されています。ここでは、そのクラスを追加するスニペットは次のとおりです。

JS

$('.filterSelectWrap').append('<span class="selectInner">' + filter + '</span>'); 

HTML

<div class="selectWrapper"> 
    <label class="selectLabel">Filter:</label> 
    <div class="innerSelectWrapper"> 
     <div class="filterSelectWrap"> 
      <select id="filterComboBox"></select> 
     </div> 
    </div> 
</div> 

CSS

.selectWrapper { 
    float: left; 
    margin: 0; 
    padding: 5px; 
} 

.innerSelectWrapper { 
    float: left; 
    width: 150px; 
    margin-left: 5px; 
} 

span.selectInner { 
    position: absolute; 
    display: block; 
    margin: 0; 
    padding: 0 0 0 5px; 
    width: 100%; 
    height: 22px; /* set same height */ 
    line-height: 22px; /* set same height */ 
    color: #333; 
    white-space: nowrap; 
    overflow: hidden; 
    text-align: left; 
    text-overflow: clip; 
    font-weight: normal; 
    font-size: 1em; 
    z-index: 901; 
    background: url('../images/arrow.png') no-repeat 100% -5px #fff; /* fallback bg image*/ 
    background: url('../images/arrow.png') no-repeat 100% -5px, -webkit-linear-gradient(top, #fff, #9c9c9c); 
    background: url('../images/arrow.png') no-repeat 100% -5px, -moz-linear-gradient(top, #fff, #9c9c9c); 
    background: url('../images/arrow.png') no-repeat 100% -5px, -ms-linear-gradient(top, #fff, #9c9c9c); 
    background: url('../images/arrow.png') no-repeat 100% -5px, -o-linear-gradient(top, #fff, #9c9c9c); 
    background: url('../images/arrow.png') no-repeat 100% -5px, linear-gradient(top, #fff, #9c9c9c); 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
    -o-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
} 

select { 
    width: 100%; 
    height: 22px; /* set same height */ 
    position: absolute; 
    left: 0; 
    z-index: 902; 
    padding: 0; 
    margin: 0; 
    border: 0 none; 
    float: none; 
    opacity: 0; 
    cursor: pointer; 
    -webkit-appearance: menulist-button; 
} 

Answer 1

を助けるかもしれないあなたは別の内側に内部テキストfilterを追加する必要があります子div（私の場合、.inner-textという名前）：

$('.filterSelectWrap').append('<span class="selectInner"><span class="inner-text">' + filter + '</span></span>'); 

そして.inner-textにこれらのCSSルールを与える：

.inner-text { 
    display: block; 
    padding-right: 20px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

は、以下の作業スニペットを見てください：

var filter = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quaerat dolore iusto ducimus adipisci natus dicta, veritatis pariatur magni quos error explicabo provident iure velit dolorem odio! Sed, ratione sit.'; 
 

 
$('.filterSelectWrap').append('<span class="selectInner"><span class="inner-text">' + filter + '</span></span>');

.selectWrapper { 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 5px; 
 
} 
 

 
.innerSelectWrapper { 
 
    display: inline-block; 
 
    width: 150px; 
 
    margin-left: 5px; 
 
    position: relative; 
 
} 
 

 
span.selectInner { 
 
    position: absolute; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 0 0 0 5px; 
 
    width: 100%; 
 
    height: 22px; /* set same height */ 
 
    line-height: 22px; /* set same height */ 
 
    color: #333; 
 
    font-size: 1em; 
 
    z-index: 901; 
 
    background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png') no-repeat 100%, -webkit-linear-gradient(top, #fff, #9c9c9c); 
 
    background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png') no-repeat 100%, -moz-linear-gradient(top, #fff, #9c9c9c); 
 
    background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png') no-repeat 100%, -ms-linear-gradient(top, #fff, #9c9c9c); 
 
    background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png') no-repeat 100%, -o-linear-gradient(top, #fff, #9c9c9c); 
 
    background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png') no-repeat 100%, linear-gradient(top, #fff, #9c9c9c); 
 
    background-size: contain; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -ms-border-radius: 4px; 
 
    -o-border-radius: 4px; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
 
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
 
    -o-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
 
} 
 

 
select { 
 
    width: 100%; 
 
    height: 22px; /* set same height */ 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: 902; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0 none; 
 
    float: none; 
 
    opacity: 0; 
 
    cursor: pointer; 
 
    -webkit-appearance: menulist-button; 
 
} 
 

 
.inner-text { 
 
    display: block; 
 
    padding-right: 20px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="selectWrapper"> 
 
    <label class="selectLabel">Filter:</label> 
 
    <div class="innerSelectWrapper"> 
 
     <div class="filterSelectWrap"> 
 
      <select id="filterComboBox"></select> 
 
     </div> 
 
    </div> 
 
</div>

希望、これはあなたが&にそれを達成しようとしているものです助けて！

Answer 2

あなたはこのような何かを考えがあります。..

text-overflow: clip; 
text-overflow: ellipsis; 
text-overflow: "…"; 

パディングと使い方に関してこれを見てください。

p { 
 
    width: 200px; 
 
    border: 1px solid; 
 
    padding: 2px 25px 2px 5px; 
 

 
    /* BOTH of the following are required for text-overflow */ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
.overflow-ellipsis { 
 
    text-overflow: ellipsis; 
 
} 
 

 
.overflow-string { 
 
    /* Not supported in most browsers, 
 
     see the 'Browser compatibility' section below */ 
 
    text-overflow: " [.]"; 
 
}

<p class="overflow-ellipsis">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Answer 3

パディングの右テキストの容器に詰め物を与える

値が右より大きいか又はその矢印画像の幅に等しくなければなりません。

とtext-overflow : ellipsis

問題がテキストであるかは、パディングボックスとellipsisでクリップなっているコンテンツボックスでそれをしない

これはあなたPrevent text from overflowing a padded container in HTML