How to show all text of very long select option?

问题

I have some very long <option>s in a <select> box but I don't want the box to be so wide. The problem is that the full text can't be read when I style the box smaller. I was thinking about hovering a copy of the text exactly over the option the mouse pointer is over but only if the text is too long to be fully displayed.

However, if I create a new element, say a <p> with jQuery it doesn't have a width until I insert it into the document so I can't decide whether to insert it or not.

Even if I did create it successfully I'm not sure all the styles would be the same.

Is there a way to get this idea working or is there a better way of displaying the complete text of the long <option>s in-place?

回答1:

what about this?

<select id="muchtextselect">
  <option value="" title="This is some long text text This is some long text text This is some long text text ">This is some long text text This is some long text text This is some long text text </option>
  <option value="">Short Text</option>
  <option value="" title="This is some really, really long text">This is some really, really long text</option>
</select>

var maxLength = 15;
$('#muchtextselect > option').text(function(i, c) {
  if (c.length > maxLength) {
    return c.substr(0, maxLength) + '...';  
  }
});

WORKING DEMO

回答2:

USE style="width:xx%;"

Example

<select name="data"  style="width:50%;">
 <option value="1">Lorem Ipsum</option>
 <option value="3">simply dummy</option>
 <option value="3">text of the printing and typesetting industry. Lorem Ipsum has been the industry's</option>
</select>

回答3:

Please use Select2 last version with bootstrap :) i found it in 2 days

https://select2.org/

{!! Html::style('backend/dist/css/select2.min.css') !!}
{!! Html::style('backend/dist/css/select2-bootstrap.css') !!}
{!! Html::script('backend/dist/js/select2.min.js') !!}

回答4:

You can use max-width + text-emphasis css properties. For more information you can check here:

http://www.w3schools.com/cssref/pr_dim_max-width.asp http://www.w3schools.com/cssref/css3_pr_text-emphasis.asp

来源：https://stackoverflow.com/questions/25407884/how-to-show-all-text-of-very-long-select-option

标签

jquery

html

css

forms