CODEWITHSUNDEEP
htmlcss
David Prieto
David Prieto

Reputation: 2299

Select tag is breaking up a word

I have a form in a web page and a select tag is breaking up the text inside it inappropriately like this:

Select tag

It is breaking up the work "Banking" for some reason. I have tried to prevent this with de CSS attribute word-break: keep-all but it does nothing.

The HTML and CSS are like this:

<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;
}

I'm not sure if is relevant but the entire form is done in WordPress with Contact Form 7.

EDIT

If you add the attribute white-space: nowrap; it swallows the overflow: enter image description here

Upvotes: 1

Views: 147

Answers (2)

AGE
AGE

Reputation: 3792

I am not sure how important it is for your container select to have a fixed width of 200px, but this is causing the line of text to break. Two solutions are available to you:

  1. Change the width: 200px to min-width: 200px which will expand to the width of the text in the options of your select box.

  2. Add the word-break: break-word and hyphens: auto properties to your CSS... which may help but will certainly not look as good as what I wrote on option 1.

Upvotes: 3

CreativePS
CreativePS

Reputation: 1093

Try adding the white-space property to your select CSS class:

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

Upvotes: 1

Related Questions