-3

codepenlink

How to break line of option text and equal to select tag width.

Tarun..
  • 1,029
  • 2
  • 9
  • 20
  • 3
    Please don't use images to show code. This makes it very hard for us to help. Instead share the codepen link in the question description. – Ron Nabuurs May 18 '18 at 07:11
  • Possible duplicate of [html select dropdrown width is too big](https://stackoverflow.com/questions/12371329/html-select-dropdrown-width-is-too-big) – Ron Nabuurs May 18 '18 at 07:16
  • yeah sorry for image !! Here is the code pen line please give me some idea about option width . https://codepen.io/anon/pen/PexXXP – Tarun.. May 18 '18 at 07:22

2 Answers2

1

You cannot apply formatting to the option dropdown as mentioned in this answer

You can however make use of something like ellipsis.

var maxLength = 15;
$('#example > option').text(function(i, text) {
    if (text.length > maxLength) {
        return text.substr(0, maxLength) + '...';  
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="example" id="example">
    <option value="">This is some long text</option>
    <option value="">Short Text</option>
    <option value="">This is some really, really long text</option>
</select>
Ron Nabuurs
  • 1,528
  • 11
  • 29
-1

Try this,

select{
    min-width: 100px;
   text-overflow: ellipsis;
}
<select>
    <option value="1"><span>content 1</span></option>
    <option value="3">Content is so long but still some remains</option>
</select>

Working fiddle

Jayakrishnan
  • 1,295
  • 2
  • 13
  • 27
Ram kumar
  • 3,152
  • 6
  • 32
  • 49
  • I do not see any effect of css on the width. width is controlled by the content of option! – ShAkKiR May 22 '18 at 06:24
  • I read the question and it says make option width same as select, not the other way! – ShAkKiR May 22 '18 at 06:44
  • Then you didn't see result hahah.. keep calm and learn something rather than criticizing others – Ram kumar May 22 '18 at 06:46
  • I'm trying, could you please tell me what does these styles doing in this code? I removed them and yet the result is same :) – ShAkKiR May 22 '18 at 06:47
  • Select will expand with option content size. If you don't want initial width you can remove min-width: 100px from there like this https://jsfiddle.net/yeLfqeep/ – Ram kumar May 22 '18 at 06:50
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171513/discussion-between-shakkir-and-kumar). – ShAkKiR May 22 '18 at 06:52
  • hahaha.. you already downvote without checking answer carefully. So why should i talk about this anyway i have already explain you. – Ram kumar May 22 '18 at 06:54
  • min-width: 100px is the only thing that is working in this. text-overflow: ellipsis;has no effect! can you do with width: 100px? that is what the question is about – ShAkKiR May 22 '18 at 06:59