Почему одна метка «ломается», а другая ведет себя?

Question

Со следующей HTML и CSS и JQuery (в jsFiddle), переломами ярлыка "Begin Date" на две линии:

Begin Даты

... в то время как "Время начала" остается на одной линии, как я ожидал бы/хотел бы это сделать.

HTML:

<tr> 
      <td class="labelText"> 
       <label for="BeginTheBeguine">Begin Date:</label> 
      </td> 
      <td> 
       <input type="date" name="BeginTheBeguine" id="BeginTheBeguine" /> 
      </td> 
      <td> 
       &nbsp; 
      </td> 
      <td class="labelText"> 
       <label for="BeginTime">Begin Time:</label> 
      </td> 
      <td> 
       <input type="time" name="BeginTime" id="BeginTime" /> 
      </td>   
     </tr> 

CSS:

.labelText { font-family: verdana } 

JQuery:

$(function() { 
var pickerOpts ] { 
    appendText: "mm/dd/yy", 
    defaultDate: "-1", 
    showOtherMonths: true 
}; 
$("#BeginTheBeguine").datepicker(); 
}); 

Почему "Begin Date" нарушение, и как я могу предотвратить это делать, что?

Answer 1

Если таблица не совсем подходит, браузеру необходимо запустить где-то и обернуть текст. Похоже, он выбирает первую ячейку.

Если вы хотите, чтобы эти ярлыки, чтобы остаться на одной линии, независимо, попробуйте:

.labelText { 
    font-family: verdana; 
    white-space: nowrap; 
}