0

Quiero que dentro del valor <option> de un <select> entre un párrafo de tres líneas con el nombre de un club de fans, el dueño y la cantidad de miembros. Intente usar <br> pero el <select> no lo toma en cuenta y escribe todo el texto en la misma línea. Anexo el código del <select> acepto cualquier sugerencia en html o en css.

<select class="multiple" multiple name="clubes">
   <option value="1">Biblioteca Stark<br>Dueño Actual: Tony Stark<br>Miembros: 15</option>
   <option value="2">El Calabozo del Androide<br>Dueño Actual: Jeff Albertson<br>Miembros: 7</option>
   <option value="3">La Atalaya Comics<br>Dueño Actual: Jefferson Gutierritos<br>Miembros: 5</option>
   <option value="4">La Mansión Wayne<br>Dueño Actual: Bruce Wayne<br>Miembros: 8</option>
   <option value="5">ORDEN 66 Internacional<br>Dueño Actual: Darth Vader<br>Miembros: 5</option>
   <option value="6">Orden Jedi Mundial<br>Dueño Actual: Joda<br>Miembros: 9</option>
   <option value="7">Renegados de la Fuerza<br>Dueño Actual: Asoka<br>Miembros: 10</option>
</select>
2
  • 2
    No es bien visto colocar urgente o lo mas pronto posible, la ayuda dependerá de que en la comunidad haya quienes tengan tiempo y el conocimiento para ayudarte ;)
    – user128299
    Commented el 29 jun. 2021 a las 2:10
  • stackoverflow.com/questions/39325414/line-break-in-html-with-n Espero te sirva, puedes hacerlo usando css
    – KiD
    Commented el 29 jun. 2021 a las 3:39

1 respuesta 1

1

Ya que necesitas solo 3 líneas, una posibilidad seria utilizar pseudo-elementos before y after donde:

• el before representa la primera línea,

• el texto del option es la segunda línea y

• el after la tercera línea.

Cada elemento option tiene un atributo data-before y otro data-after que serán utilizados para definir el content de los pseudo-elementos.

Por favor observa que los pseudo-elementos tienen display:block para crear una nueve línea de texto.

select{height:140px}
option{padding: 1em;}
option::before{content: attr(data-before);
       display:block;
}
option::after{content: attr(data-after);
       display:block;
}
<select class="multiple" multiple name="clubes">
  <option value="1" data-before="Biblioteca Stark" data-after="Miembros: 15k">Dueño Actual: Tony Stark</option> 
  <option value="2" data-before="Biblioteca Bark" data-after="Miembros: 18k">Dueño Actual: Jeff Albertson</option>
  <option value="3" data-before="Biblioteca Clark" data-after="Miembros: 10k">Dueño Actual: Reff Bertson</option> 
</select>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.