Как сохранить текст в одной строке в Firefox?

Question

Я использую JQuery 1.11. Я пытаюсь создать стилизованное меню выбора, которое автоматически настраивает его ширину на основе ширины самого большого элемента. У меня есть

<div class="profileField"> 
    Birthday<br/> 
    <select id="user_dob_2i" name="user[dob(2i)]"> 
<option value="">Select Month</option> 
<option value="1">January</option> 
<option value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option> 
</select> 
</div> 

, а затем я использую следующий CSS

.select { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    font-size: 16px; 
    color: #fff; 
    width: 220px; 
    height: 42px; 
} 

.select-styled { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: gray; 
    padding: 11px 12px; 
    -webkit-transition: all 0.2s ease-in; 
    transition: all 0.2s ease-in; 
} 

.select-styled:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border: 7px solid transparent; 
    border-color: #fff transparent transparent transparent; 
    position: absolute; 
    top: 16px; 
    right: 10px; 
} 

.select-styled:hover { 
    background-color: #7b7b7b; 
} 

.select-styled:active, .select-styled.active { 
    background-color: #737373; 
} 

.select-styled:active:after, .select-styled.active:after { 
    top: 9px; 
    border-color: transparent transparent #fff transparent; 
} 

.select-options { 
    display: none; 
    position: absolute; 
    top: 100%; 
    right: 0; 
    left: 0; 
    z-index: 999; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    background-color: #737373; 
    overflow: scroll; 
} 

.select-options li { 
    margin: 0; 
    padding: 12px 0; 
    text-indent: 15px; 
    border-top: 1px solid #676767; 
    -webkit-transition: all 0.15s ease-in; 
    transition: all 0.15s ease-in; 
} 

.select-options li:hover { 
    color: gray; 
    background: #fff; 
} 

.select-options li[rel="hide"] { 
    display: none; 
} 

ul.select-options { 
    max-height: 15em; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

Однако то, что я не могу понять, как сохранить весь текст опции по умолчанию в одной строке. Если вы посмотрите на мой JSFiddle - http://jsfiddle.net/m5bxbx6d/1/, вы заметите, что «Выбрать месяц» истекает в две строки на Mac Firefox. В Chrome и Safari текст находится на одной строке. Как сделать все это на одной линии для Firefox?

Я не хочу жестко кодировать ширину, потому что я хочу, чтобы этот код был достаточно общим для применения к любому меню, которое я хочу создать.

Answer 1

Ваши варианты ломаются, потому что вы не делаете ширину достаточно широкой.

Быстрое решение заключается в том, чтобы использовать неиспользуемые пробелы ( ). Вы можете либо жёстко их из добавить их программно следующим образом:

$(selectMenu).children('option').each(function(){ 
    $(this).html($(this).html().replace(" ", " ")); 
}); 

Example 1

Реальное исправление просто исправить вашу ширину. Ваши калорации ошибочны, потому что вы не используете outerWidth(), и потому, что вы добавляете классы после измерения. Сначала добавьте свои классы, чтобы получить точные измерения, и используйте outerWidth() вместо width(), и он должен работать.

$this.addClass('select-hidden'); 
var paddingWidth = $paddingCalculator.outerWidth() + 10; 
$paddingCalculator.remove(); 
var selectWidth = $this.outerWidth() + paddingWidth; 

Example 2

Answer 2

Просто добавьте важную роль в вашей ширине div.select,

CSS:

.select { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    font-size: 16px; 
    color: #fff; 
    width: 220px !important; 
    height: 42px; 
} 

FIDDLE

Answer 3

Используйте white-space свойства для управления текстом строки обернет:

.select-styled { 
    white-space: nowrap; 
} 

Это фиксирует разрыв строки, но теперь текст течет под треугольником стрелка вниз ...Вы можете добавить некоторое дополнение к .select контейнеру выкроить пространство для стрелки, чтобы она не будет пересекаться:

.select { 
    padding-right: 30px; 
} 

Answer 4

Я только изменил эти две строки в ваших JavaScript, и кажется, что он работает нормально (Firefox + Mac):

var paddingWidth = $paddingCalculator.outerWidth() + 15; 

var selectWidth = $this.children().width() + paddingWidth; 

обивка один был только для эстетики

Answer 5

по существу, это происходит потому, что вы устанавливаете ширину нового упаковщика элемента <div class="select"> решений кал на основе ширины оригинала select: функция jQuery width() на элементах выбора возвращает разные результаты в Firefox и в Chrome. Таким образом, вы получаете что-то вроде style="width: 111px;" в Firefox и style="width: 134px;" в Chrome.

Вы можете использовать внешнюю ширину для получения более согласованных результатов, но они также будут отличаться незначительно, потому что вычисление ширины в нестандартном select, отображаемом браузером, является ненадежным.

Как простое решение, я думаю, что только подход CSS, предложенный @keithjgrant, определенно самый элегантный, но я бы добавил также white-space: nowrap; в .select-options li. N.b .: это не полное решение, потому что вы могли бы иметь очень длинные тексты в одном из других элементов option, он бы переполнялся и получался частично скрытым.

.select-styled { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: gray; 
    padding: 11px 12px; 
    -webkit-transition: all 0.2s ease-in; 
    transition: all 0.2s ease-in; 

    /* this */ 
    white-space: nowrap; 
    padding-right: 40px; 
} 

.select-options li { 
    margin: 0; 
    padding: 12px 0; 
    text-indent: 15px; 
    border-top: 1px solid #676767; 
    -webkit-transition: all 0.15s ease-in; 
    transition: all 0.15s ease-in; 

    /* and this */ 
    white-space: nowrap; 
} 

Как более продвинутое решение, я бы пересмотреть способ вашей замены стилизованы (что 220px жёстко значение также не является хорошим решением).

---

Я также предлагаю вам взглянуть на хорошей библиотеке замены я использовал в прошлом называли Select2.