Cufon + SelectBoxIt combination ads three dots when I have 2 or more words in option

Question

I have a code like:

<script type="text/javascript">
            Cufon.replace('#select-stuff', { fontFamily: 'Myriad Pro' });
            Cufon.refresh('#select-stuff'); 
</script>

<script>
       $(document).ready(function(){

          // loading selectBoxIt
          var select = $("select");
          select.selectBoxIt();

          // code to fix reloading cufon on select change in select box
          refreshCufon();
          select.change(function() {
            refreshCufon();
          });          
          function refreshCufon() {
           Cufon.replace('#select-stuff', { fontFamily: 'Myriad Pro' });
           Cufon.refresh();
          }

        });
</script>

and it works but when I have e.g. 2 or more words in the option it goes wrong and instead of the words it add s three dots like this:

or

So it doesn't matter how many words tere are. it somehow replace the last word with three dots.

Any idea what is the problem?

Answer 1

<style rel="stylesheet">
  .selectboxit-text {
    text-overflow: clip;
  }
</style>

Answer 2

If you use the default .css file provided with selectBoxIt, it contains an entry:

/* Button Text */
.selectboxit-text {
  ...
  text-overflow: ellipsis;
  ...
}

which adds the ellipsis (three dots) automatically when text is longer that the container. It's possible that changing the text-overflow will fix your issue, but it's hard to tell more without actual code.