CSS "seleccionar" espacio de texto

I've the following issue: there is <select> option in my website, and it have 3 different logic data in one <option> which needs to be separated like this:

ejemplo I was thinking about word-spacing, but as you can see there is some spaces in last data, so it will not work. :after e :before will be not good either. And as I know there is no way to insert <div> or <span> dentro <option>. I was wondering is there any other ways to implement this, because currently I have only bad solution with &nbsp;.

preguntado el 28 de mayo de 14 a las 13:05

Can we see some code? and which "some spaces" -

Which code do you want to see? It's just standart structure with <select><option>text here</option></select>. "Some spaces" - look at the "999 999 999 999" there is space between "999" and "999" -

Yes. Like this "<option>123456789231&nbsp&nbsp&nbsp&nbsp&nbsp&nbspBYR&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp999 999 999 999</option>" (yes, nbsp is just awful) -

@Dazvolt: Please add the HTML markup to the Question along-side the CSS you currently have that does not do what you want. Including a jsFiddle (or similar) demonstrating the issue also helps. Without the exact markup and (if relevant) current CSS a lot of guessing and drip-feeding of information in comments might be needed. -

Something like letter-spacing:-2px; can help you but would need a lot of work to make it look like what you want. Code would be nice. Please share a Fiddle. :) -

2 Respuestas

Si quieres presentar option elements in a tabular manner, as it seems, then the clumsy way of using no-break spaces e a monospace font seems to be the only way.

Consider using a different approach, such as a set of radio buttons with associated labels and other texts. Then you can use a table .

contestado el 28 de mayo de 14 a las 18:05

I did a few changes to a library called Elegido ... I think it's just what you need.

DEMO

This is the usage in JS:

$('.chosen-select').chosen({
  width: '250px',
  html: function(option){      
    return $(option).data('html');
  }
});

contestado el 28 de mayo de 14 a las 16:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.