选择标记正在分解单词

Question

我在网页上有一个表单，而select标签正在不恰当地分解其中的文字：

它打破了工作＆＃34;银行＆＃34;由于某些原因。我试图用de CSS属性word-break: keep-all来防止这种情况，但它没有做任何事情。

HTML和CSS是这样的：

<select name="your-Detalle" 
        class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" 
        aria-required="true" 
        aria-invalid="false">
  <option value="">---</option>
  <option value="Operaciones con Tarjeta de Débito">
    Operaciones con Tarjeta de Débito
  </option>
  <option value="Operaciones con Tarjeta de Crédito">
    Operaciones con Tarjeta de Crédito
  </option>
  <option value="Operaciones de Internet Banking">
    Operaciones de Internet Banking
  </option>
</select>

select {
    font-family: Futura-medium;
    font-size: inherit;
    line-height: inherit;
    height: 60px;
    width: 200px;
    border: none;
    background-color: #F2F2F2;
    margin-bottom: 10px;
    color: #666666;
    padding-left: 5%;
    font-weight: bold;
    word-break: keep-all;
}

我不确定是否相关，但整个表单是在WordPress中使用Contact Form 7完成的。

修改

如果添加属性white-space: nowrap;，它会吞下溢出：

Answer 1

尝试将空白属性添加到select CSS类：

select {
    /*... other properties ...*/
    white-space: nowrap;
}