Home / Questions / 329312
Accepted
Shassain
Asked: 2020-02-14 15:33:15 +0800 CST 2020-02-14 15:33:15 +0800 CST

How to apply a word-wrap inside a select-option? with css and html

  • 772

I have the following code where the content of the options overflows and you can't see the rest of the content.

I have tried to do it in the following way without any result. Ex:

div.po{
  width:245px;
  height: auto;
  word-wrap: break-word;
}
select{
  height: 220px;
  width:250px;
}
<select multiple>
    <option><div class="po">1 .-Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div></option>
    <option><div class="po">2 .-Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div></option>
    <option><div class="po">3 .-Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div></option>
    
</select>

Check some questions like this one: Create wrap effect for option too long in select , but it doesn't help me at all since I need all the text to be read by the user.

how to put the format word-wrap: break-word;in options tags?

javascript

1 Answers

  1. Best Answer

    You need to use white-space: normal;like this:

    select option{
  width:200px;
  height: auto;
  word-wrap: break-word;
  white-space: normal;
}
select{
  height: 220px;
  width:250px;
}
    <select multiple>
    <option><div class="po">1 .-Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div></option>
    <option><div class="po">2 .-Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div></option>
    <option><div class="po">3 .-Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div></option>
    
</select>

    • 1