title: Html.ListBoxFor with multiline items
body: <p>is it possible to make ASP.NET Html.ListBoxFor to work with multiline items ? Because right now i have a list of strings, some strings are very long, so they do not fit into list box, and are cut, i.e, instead of "qwertyuiop" i see only "qwer". The width of the list box cannot be changed, that's how it must be. Can i make it to show a single item/string over multiple lines(i tried inserting new line symbol, html line break symbol into string, doesn't work) ? Or do i have to use some other html element for that instead of Html.ListBoxFor ?</p>
  
  <p>Edit:
  My code is:</p>
  
  <pre><code>@Html.ListBoxFor(x =&gt; x.MyFriendsIdList, new SelectList(this.Model.MyFriendsDisplayList, "Id", "Name"), new { id = "FriendsSourceList" })
  </code></pre>
  
  <p>Anyway, i'm gonna need to make a multiline listbox plus i need to have ability to search/filter through items and hide/show them as i type text in search text field. Any recomendations ?</p>
  
  <p>Edit: newest code example :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;
      &lt;!-- none of these styles work on ff or ie9... --&gt;
      &lt;style&gt;
          select {
              -ms-word-break: break-all;
              -ms-word-wrap: break-all;
              -webkit-word-break: break-word;
              -webkit-word-wrap: break-word;
              word-break: break-word;
              word-wrap: break-word;
              -webkit-hyphens: auto;
              -moz-hyphens: auto;
              hyphens: auto;
              white-space: pre-wrap;
              white-space: -moz-pre-wrap;
              white-space: -pre-wrap;
              white-space: -o-pre-wrap;
              display: inline-block;
          }
      &lt;/style&gt;
      &lt;head&gt;
          &lt;title&gt;Site Title&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;h1 style="margin-left:100px;"&gt;My List Box Source Example&lt;/h1&gt;
          &lt;!-- In style, "word-wrap:break-word" makes items appear over multiple lines if needed, works only on chrome, ff and ie9 broken --&gt;
          &lt;select name="sometext" multiple="multiple" style="width:200px; height:250px; resize:none; margin-left:100px;" id="mylist"&gt;
              &lt;option value="1"&gt;VeryLongText123456VeryLongText123456VeryLongText123456VeryLongText123456VeryLongText123456VeryLongText123456END&lt;/option&gt;
              &lt;option value="3"&gt;Text1&lt;/option&gt;
              &lt;option value="5"&gt;Text2&lt;/option&gt;
              &lt;option value="6"&gt;Text3&lt;/option&gt;
              &lt;option value="7"&gt;Text4&lt;/option&gt;
              &lt;option value="9"&gt;Text5&lt;/option&gt;
              &lt;option value="12"&gt;abc6&lt;/option&gt;
              &lt;option value="14"&gt;SomeRandomText&lt;/option&gt;
              &lt;option value="45"&gt;ghi8&lt;/option&gt;
              &lt;option value="16"&gt;jkl9&lt;/option&gt;
              &lt;option value="11"&gt;zzz&lt;/option&gt;
              &lt;option value="32"&gt;xxx&lt;/option&gt;
              &lt;option value="73"&gt;LastItemHere&lt;/option&gt;
          &lt;/select&gt;
          
          &lt;h2 style="margin-left:100px;"&gt;Search field&lt;/h2&gt;
          &lt;textarea rows="2" cols="45" style="margin-left:100px; resize:none; overflow-y:hidden;" id="searchfield"&gt;&lt;/textarea&gt;&lt;br /&gt;&lt;br /&gt;
          &lt;input id="FilterButton" type="submit" style="margin-left:200px; width: 125px" value="Filter List" class="radius button"/&gt;&lt;br /&gt;&lt;br /&gt;
          &lt;input id="HideButton" type="submit" style="margin-left:200px; width: 195px" value="Hide items that contains" class="radius button"/&gt;
          
          &lt;h2 style="margin-left:100px;"&gt;My Text Area Example&lt;/h2&gt;
          &lt;textarea rows="3" cols="45" style="margin-left:100px; resize:none; overflow-y:hidden;" id="mytextarea"&gt;&lt;/textarea&gt;
   
          &lt;script src="jquery-2.1.1.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              // Titles - when mouse over entry
              options = document.getElementById("mylist").getElementsByTagName("option");
  
              for (var i = 0; i &lt; options.length; i++) {
                  options[i].title = options[i].text;
              }
              
              $("#FilterButton").click(function (x) {
                  x.preventDefault();
                  
                  //var size = document.getElementById("searchfield").rows;
                  //console.log("size : " + size);
                  //document.getElementById("searchfield").rows = size + 1;
                  
                  //Search and hide works on chrome and ff, ie9 broken
                  var searchText = $("#searchfield").val();
                  var list = document.getElementById("mylist");
                  for (var c = 0; c &lt; list.length; c++) {
                      if(searchText != null &amp;&amp; searchText != '') {
                          var index = list[c].text.toLowerCase().indexOf(searchText.toLowerCase());
                          if(index &gt;= 0) {
                              $('#mylist option[value=' + list[c].value + ']').show();
                          }
                          else {
                              $('#mylist option[value=' + list[c].value + ']').hide();
                          }
                      }
                      else {
                          $('#mylist option[value=' + list[c].value + ']').show();
                      }
                  }
              });
              
              $("#HideButton").click(function (x) {
                  x.preventDefault();
                  var searchText = $("#searchfield").val();
                  var list = document.getElementById("mylist");
                  for (var c = 0; c &lt; list.length; c++) {
                      if(searchText != null &amp;&amp; searchText != '') {
                          var index = list[c].text.toLowerCase().indexOf(searchText.toLowerCase());
                          if(index &gt;= 0) {
                              $('#mylist option[value=' + list[c].value + ']').hide();
                          }
                          else {
                              $('#mylist option[value=' + list[c].value + ']').show();
                          }
                      }
                      else {
                          $('#mylist option[value=' + list[c].value + ']').show();
                      }
                  }
              });
          &lt;/script&gt;
      &lt;/body&gt;
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>