Rendre le texte à sélectionner l'élément de l'habillage lorsque trop de temps?

J'ai une liste de sélection où le texte dans les options est trop longtemps qu'il est arriver recadrée. Est-il possible de rendre le texte au lieu de cela, de sorte qu'elle est visible?

Rendre le texte à sélectionner l'élément de l'habillage lorsque trop de temps?

http://jsfiddle.net/W4KG7/

<select>
    <option>This is option 1</option>
    <option>This is option 2</option>
</select>

select {
    width: 92px;
}
InformationsquelleAutor Evanss | 2014-04-11
  1. 2

    À l'aide de CSS pour faire cela ne fonctionne que sur Chrome...

    Vous ne pouvez pas le faire simplement en utilisant le CSS, mais vous pouvez utiliser du jQuery pour
    un "ressembler à" une solution.

    Prendre un coup d'oeil à cette rapide démonstration que j'ai faite: JSnippet DÉMO

    Comme vous pouvez le voir, il se comporte comme tu le voulais - je suis emballage de la boîte de sélection avec un DIV
    et d'ajouter un autre qui chevauche la zone de sélection -, il prend la boîte de sélection d'une largeur fixe de moins
    le bouton de la boîte de sélection. Maintenant, je suis d'assigner à cette div de la même apparence que la boîte de sélection +
    La valeur sélectionnée.

    À chaque fois que la boîte de sélection sera changé, la nouvelle valeur sera définie dans le masque que nous avons créé et
    le calcul de la nouvelle hauteur sera fixé à la boîte de sélection d'.

    Voici le code jQuery:

    $(function(){
var mYbrowser = detectBrows();
console.log(mYbrowser[0]);
$('select').each(function(index,ele){
//get current style and fixed width:
var renderWidth = $(ele).outerWidth();
var renderWidthFixed = renderWidth;
var borderstyle = $(ele).css("border-bottom-style");
var bordercolor = $(ele).css("border-bottom-color");
var borderwidth = $(ele).css("border-bottom-width");
var font = $(ele).css("font");
var defaultValue = $(ele).val();
if (borderwidth == "0px") { borderwidth = "1px"; /*FF*/ }
$(ele).css({ cursor:"pointer" });
//set by browser (different buttons):
var borderRightParsed = borderwidth +" " + borderstyle + " " + bordercolor;
var topParsed = Math.round(parseInt(borderwidth.replace(/[^0-9\.]+/g,"")));
switch(mYbrowser[0]) {
case "MSIE": renderWidthFixed = renderWidth-28; break;
case "I": renderWidthFixed = renderWidth-28; break;                 
case "Chrome": renderWidthFixed = renderWidth-30; break;
case "Firefox": 
renderWidthFixed = renderWidth-27; 
borderRightParsed= "0"; 
if (index > 0) topParsed++;
break; 
}
//wrap + add a overlapping layer that will hide content and calculate the correct height:
$(ele).wrap($('<div />').css({width:renderWidth, margin:0, padding:0, position:"relative"}));
$(ele).after($("<div>" + defaultValue + "</div>")
.css({
minHeight:20,
padding:"5px 0px 5px 8px",
width:renderWidthFixed,
backgroundColor:"white",
whiteSpace:"pre-wrap",
position:"absolute",
borderRight:borderRightParsed,
top:topParsed,
cursor:"default",
left:borderwidth,
font:font
})
);
//set select box new height:
setHeight(ele);
//append change behavior:
$(ele).change(function(){
$(ele).next('div').text($(ele).val());
setHeight(ele);
});
});
function setHeight(ele) {
var newHeight = $(ele).next('div').outerHeight();
$(ele).height(newHeight);
}
function detectBrows(){
var ua= navigator.userAgent, tem, 
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
tem= ua.match(/\bOPR\/(\d+)/)
if(tem!= null) return 'Opera '+tem[1];
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
return M;        
}
});

    Simple et pas compliqué - le problème est que la zone de sélection de l'élément de comportement
    et regard différent sur chaque navigateur.
    J'ai ajouté une petite rapide fonction de détecter le navigateur utilisé et de peaufiner son
    valeurs uniques.

    Cette méthode peut être Améliorée, mais c'est un bon point de départ.

    Shlomo

    InformationsquelleAutor Shlomi Hassid
  2. 3
    select {
width: 92px;
white-space:pre-wrap;
}

    Cela ne semble fonctionner dans Google Chrome.
    https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

    InformationsquelleAutor gbishop3